談談如何用CSS處理文字格式

文字方面的css內容不少，但只要是用過一下office word來編輯過文章的童鞋都能輕易理解其中的大部分。那麼，今天僅僅來談談其中最複雜的部分——文字格式。

眾所周知，瀏覽器對html中的換行符是採取忽略政策的，因此一般推薦使用

來換行。另外，對於多個空格(space)以及tab也只會認作乙個空格(space)來處理，因此當需要用到多個空格的時候，就需要利用空格的實體字元——來強制顯示空格。

實際上，以上的這種種麻煩，css都可以輕易克服：white-space。

下面來根據上面這**來介紹一下white-space各值的含義：

當white-space為normal（瀏覽器預設值），即換行符無效(collapse)、多個空格及tab被摺疊(collapse)成乙個空格來處理、文字內容會自動換行。

當white-space為nowrap時，文字內容不自動換行（至於是強行突破容器還是截斷顯示則要視乎另乙個css——overflow，下文詳述），其它表現與normal一致。

當white-space為pre時，換行符有效、多個空格及tab不會被摺疊，文字不會自動換行。此屬性多用來展示程式**段，可以保留其中的換行及縮排，而事實上，

的瀏覽器預設樣式中就有white-space: pre;。

pre-wrap與pre-line看**即知，不再詳述。

必須注意到，這是乙個長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。

word-wrap: normal|break-word;

當一行的末尾已不能完整放下某個單詞a，那麼就需要決定用哪種策略來放置這單詞a（肯定是英文了，中文沒這問題）了：

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

這兩項css屬性非常類似，一是都管換行的，二是都針對英文。在我看來，word-break比word-wrap更徹底，因為只要設定word-break: break-all;，那麼就從根本上否定了「拆分單詞」這一事實，而是轉變為「如何放置一串字母」，那麼換行就是理所當然的了。而word-wrap: break-word;實際上還是把單詞當做是「單詞」來看待的，只是為了顯示效果委曲求全了。

屬性作用於block型元素上。它規定了當內容元素溢位元素框時發生的事：裁剪內容，使用滾動條來顯示或直接顯示超出部分。

/* 預設值。內容不會被修剪，會呈現在元素框之外 */ overflow: visible;

典型如上文的：

/* 內容會被修剪，並且其餘內容不可見 */ overflow: hidden;

硬是截掉超出容器部分的內容：

/* 內容會被修剪，瀏覽器會顯示滾動條以便檢視其餘內容 */ overflow: scroll;

無論有無內容溢位容器，都顯示滾動條；如有內容溢位，通過滾動條可以檢視溢位內容：

/* 由瀏覽器定奪，如果內容被修剪，就會顯示滾動條 */ overflow: auto;

若有內容溢位容器，才顯示滾動條：

/* 規定從父元素繼承overflow屬性的值 */ overflow: inherit;

text-overflow是建立在overflow: hidden;等基礎上的，如果overflow為其它值(inherit的話就要父級情況)則無效。text-overflow有很多可取的值，但實際上目前瀏覽器相容性較好的只有clip | ellipsis：

text-overflow僅支援水平方向的溢位，換句話說，只支援單單一行文字內容的溢位（上圖那情況雖然是多行，但這種情況不會出現在中文，因為中文都是自動換行的），若想支援多行，則需要使用外掛程式，推薦 dotdotdot：

談談如何用CSS處理文字格式

css文字格式以及字型

本文章介紹CSS 文字格式

css字型文字格式滑鼠樣式

談談如何用CSS處理文字格式

css文字格式以及字型

本文章介紹CSS 文字格式

css字型文字格式 滑鼠樣式

相關推薦

css字型文字格式滑鼠樣式