CSS文字換行、裁剪

關於換行、裁剪的一些CSS屬性

word-wrap: normal | break-word

normal 正常換行，內容可以撐破容器，例如長單詞或者長數位情況

break-word 以單詞作為換行依據，如果需要，單詞內部允許斷行

word-break: normal | break-all | keep-all

normal 正常換行，內容可以撐破容器，例如長單詞或者長數位情況

break-all 以字母作為換行依據

keep-all 中英文下和normal相同

white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit

normal預設值，空白會被瀏覽器忽略

pre 空白會被瀏覽器保留，其行為方式類似 HTML 中的 <pre> 標籤

nowrap 文本不會換行，文本會在在同一行上，直到遇到 <br /> 標籤為止

pre-wrap 保留空白符序列，但是正常地進行換行(IE7-不支援)

pre-line 合并空白符序列，但保留分行符號(IE7-不支援)

inherit規定應該從父元素繼承 white-space 屬性的值(IE不支援)

應用：

文字溢出顯示省略標記（...）：

text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

文字換行：

/* 以單詞作為換行依據 */word-wrap: break-word;word-break: normal;

/* 以字母作為換行依據 */word-break: break-all;

文字強制不換行：

white-space: nowrap;