字詞換行相關 CSS 屬性

昨天看到網路上一個問題,一串長的英文或數字,例如:

<p>yoooooooooooooooooooooooooooooooooooooo</p>
<p>12345678901234567890123456789012345678901234567890</p>

這樣的東西在判斷上會被認為是一個英文單字,預設不會去斷行,所以想把它給換行就必須找點方法。
(亞洲文字的預設則是可以斷在詞的中間)

螢幕快照 2013-11-22 下午3.59.39

(以下為了方便測試都加了

style="width:300px; background-color:#fff5a2; color:#684a92;"

)

1. white-space

* normal – 預設一般的字詞結束換行
div {
   white-space: normal;
}

螢幕快照 2013-11-22 下午3.58.22

* pre – 按照程式碼上的寫法呈現,包括空白行
div {
   white-space: pre;
}

螢幕快照 2013-11-22 下午3.58.27

* nowrap – 強制不換行
div {
   white-space: nowrap;
}

螢幕快照 2013-11-22 下午3.58.34

2. word-break

* normal – 預設 (英文詞結束才能換行、中文詞間換行)
div {
   word-break: normal;
}

螢幕快照 2013-11-22 下午3.58.59 

* keep-all – 都在詞結束才換行
div {
   word-break: keep-all;
}

螢幕快照 2013-11-22 下午3.58.42

* break-all – 都詞間換行
div {
   word-break: break-all;
}

螢幕快照 2013-11-22 下午3.58.50

3. word-wrap

* normal – 預設 (英文詞結束才能換行、中文詞間換行)
div {
   word-wrap: normal;
}

螢幕快照 2013-11-22 下午4.03.29 

* break-word – 強制換行
div {
   word-wrap: break-word;
}

螢幕快照 2013-11-22 下午4.03.36

4. text-overflow (必須是 overflow:hidden)

* clip – 字詞超出剪裁
div {
   overflow: hidden;
   text-overflow: clip;
}

螢幕快照 2013-11-22 下午4.16.34

* ellipsis – 字詞超出縮寫成 …
div {
   overflow: hidden;
   text-overflow: ellipsis;
}

螢幕快照 2013-11-22 下午1.12.11

(…出了點小意外用黑底白字的)

5. overflow, overflow-x, overflow-y

設定超出容器大小的顯示方式,可以 x, y 軸分開設定

* visible – 直接超出不處理 (測的時候發現上下的邊距會不見?!)
div {
   overflow: visible;
}

螢幕快照 2013-11-22 下午3.59.08

* auto – 有超出的話加滾動條
div {
   overflow: auto;
}

螢幕快照 2013-11-22 下午4.15.18

* hidden – 超出的部分隱藏
div {
   overflow: hidden;
}

螢幕快照 2013-11-22 下午4.07.37

* scroll – 加滾動條
div {
   overflow: scroll;
}

螢幕快照 2013-11-22 下午4.14.43

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s