CSS 文本控制

one more time one more chance. 一歩重頭學前端, css入門。

學習一些 CSS 文本控制的屬性，防止作傻事。請你們對照下面列表檢驗下： 會的、不會的、似懂非懂的。筆者是一個也不會。

1. white-space
2. text-overflow: ellipsis;
3. word-break, word-wrap
4. text-align: justify
5. text-decoration
6. text-transform
7. text-indent
8. letter-spacing
9. word-spacing

文本溢出顯示(...)

.truncate {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

這個簡單的 css語句，使用的比較多了吧，那麼請解釋下 white-space 和 text-overflow，我尼瑪，並不會是否是。

white-space

white-space用來設置內容中的空格的處理方式。

white-space：normal | pre | nowrap | pre-wrap | pre-line

white-space: nowrap不換行，空格會被合併: 1. 第一行開始我寫了好多空格在實際效果中被合併成了一個；2. 而後中間又鍵入了回車，可是前端並未換行； 3. <br />是可使文本換行的;

white-space: pre保留空格(包括鍵入的回車換行)，單行文本過長時不會自動換行, <br />在任何狀況下都是能夠生效的。
See the Pen

pre-wrap是pre 的升級版，當單行文本過長，超過文本邊界時自動換行。請自行演示代碼。pre-line做爲自學內容。

text-overflow

用來定義當文本超出容器邊界時如何處理。

/*切斷 | 使用省略號 | 使用自定義的字符串*/
text-overflow: clip|ellipsis|string;

看個極端點的例子： 給 div 寬度限定爲 width:500px,而後 overflow: hidden 肯定該 div 的 文本邊界，不能再多了，再而後 white-space: pre 保留空格，可是當文本超出邊界時不會自動換行，這樣每行文本就都超出了邊界，此時咱們再嘗試使用 text-overflow 進行溢出限制。

See the Pen

那麼如今就能夠解釋單行文本溢出時加三個點顯示的代碼了：

white-space: nowrap; /*容器內的文本單行顯示*/
overflow: hidden; /*肯定文本邊界，容器的邊界就是文本的界限不能夠突出去*/
text-overflow: ellipsis; /*超出的部分使用3個點代替*/

不要忘記思考： 多行文本溢出，省略顯示如何實現。

word-break, word-wrap

推薦你們閱讀你真的瞭解word-wrap和word-break的區別嗎、
word-wrap 和 word-break 問答
斷字規則
每種語言都有各自的默認斷字規則，在哪一個位置能夠插入break-points(斷點)，當須要換行顯示時，會根據這些斷點來決定從文字的哪一個位置開始換行。 好比漢字你好嗎的斷點你·好·嗎，中間的點表示斷點的位置； 好比英文hello world的斷點hello·world;

那麼，咱們可能想要改變這些默認的斷點規則，word-break屬性就是作這個的，它會改變默認的斷點規則。當設置word-break: break-all;的時候，上面的漢字斷點規則並無改變，英文的斷點除了默認的空白符和符號斷點外，還會在任意兩個字母之間添加斷點，也就是說任意位置是能夠斷開的，此時英文hello world的斷點也就變爲h·e·l·l·o·w·o·r·l·d;

文字排版會按照斷字規則（瀏覽器規則或自定義規則）進行排版，若是一個很長很長的單詞中間又是不可斷的時候word-wrap就能夠上場了，word-wrap 是用來決定允不容許單詞內斷句的，若是不容許的話長單詞就會溢出。word-wrap: break-word它會首先嚐試將整個長單詞挪到下一行，看看下一行的寬度夠不夠，不夠的話還會進行單詞內的斷句。

word-break: normal|break-all|keep-all;word-break的本質是更改斷點規則， normal 正常規則，break-all 處處均可以斷，keep-all只能在半角空格或連字符處換行（試試長中文的句子就明白了）。

See The Pen

word-wrap: normal|break-word;normal，只在容許的斷字點換行基於瀏覽器默認設置或者 word-break 的設置。break-word它會首先嚐試將整個長單詞挪到下一行，看看下一行的寬度夠不夠，不夠的話就進行單詞內的斷句。

綜上，我本身明白了，可能你們已經被我繞暈了。

white-space word-wrap word-break 三者的關係

white-space、word-wrap、word-break 是不太好理解。沒解釋明白的話，請跳轉鏈接看看大牛們的文章。

若設置了 white-space 後，word-wrap 和 word-break又如何表現呢？ 請記住white-space 老大，word-break 老二，word-wrap 第三。若是設置了 white-space: nowrap，後二者是不起做用的。

See the Pen

text-align: justify 兩端對齊

是否是都用過 text-align: left | right;那麼 justify 是幹什麼的呢？下圖是個常見的需求文字兩端對齊。

筆者曾經使用  來打空格，真是 SB 啊，用這麼 low 的方法明顯反應出我既不會 text-align 也不會 white-space。

css的兩端對齊有個坑,最後一行的文字不會兩端對齊，而是左對齊。
推薦你們看看大漠的解釋： 在其天然狀態下，"text-align:justify"就不能工做，除非內容足夠長並引發一個換行符。不然，文本仍然左對齊。若是你想知道這是爲何，這是由於在排版中這是理想的行爲——一個塊中的最後一行文本老是左對齊。也許這是一個CSS規範設計，即便咱們只有一行文本，這一行仍是像最後一行同樣，讓文本左對齊👍。

如何保證兩端對齊呢？ 人爲插入一行東西,使得文本處於倒數第二行。

See The Pen

text-decoration

文字裝飾text-decoration : none | underline | blink | overline | line-through
在修飾 a 標籤時用的較多用於去除下劃線。

a {
    text-decoration: none;
}

text-transform👏

text-transform 屬性控制文本的大小寫。學會了該屬性，咱們不再用使用 js 來切換大小寫了。
text-transform: none | capitalize | uppercase | lowercase

See The Pen

text-indent👏

控制首行縮進，有了它也不用&nbsp了,簡單好用。

p {
  text-indent:50px;
}

letter-spacing word-space

letter-spacing和word-spacing這兩個屬性都用來控制元素中的空白寬度的。letter-spacing添加字母之間的空白，而word-spacing添加每一個單詞之間的空白。請你們注意，word-spacing對中文無效。

See The Pen

引用

你真的瞭解word-wrap和word-break的區別嗎、
word-wrap 和 word-break 問答
斷字規則
Text-align:Justify和RWD
text-align:justify兩端對齊有個坑

前端學習QQ羣: 🙌 538631558 🙌 歡迎你們批評指正

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。