哈希技術部落格


Slider

RWD響應式網頁教學 – 文字超出範圍自動換行

隨著現在智慧型設備的增加,網頁不再只限於電腦上瀏覽,而是在平板、手機、電視、甚至手錶等裝置上,都可以閱覽網站。但如此一來,各種裝置不一樣的顯示比例,如何確保正確的顯示內容而不被裁切呢?這樣的做法,就稱為RWD響應式網頁設計。

今天,我們會分享如何讓網頁中的文字,在不同的比例範圍下,可以自動換行顯示。

傳統的文字顯示


CSS語法:文字超出範圍的換行控制

針對這樣的問題,我們可以使用CSS語法「word-wrap」進行調整

  1. 強迫換行,如果英文字會被切半 word-break: break-all;
  2. 以單字為單位換行 word-wrap:break-word;
  3. 不換行 white-space:nowrap;

1. word-break: break-all; 強迫換行,可能會裁切單字

2. word-wrap:break-word; 以單字為單位換行

3. white-space:nowrap; 不換行

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *