摘要：學(xué)習(xí)一些文本控制的屬性，防止做傻事。是的升級(jí)版，當(dāng)單行文本過(guò)長(zhǎng)，超過(guò)文本邊界時(shí)自動(dòng)換行。否則，文本仍然左對(duì)齊。

one more time one more chance. 一歩重頭學(xué)前端, css入門(mén)。

學(xué)習(xí)一些 CSS 文本控制的屬性，防止做傻事。請(qǐng)大家對(duì)照下面列表檢驗(yàn)下： 會(huì)的、不會(huì)的、似懂非懂的。筆者是一個(gè)也不會(huì)。

white-space

text-overflow: ellipsis;

word-break, word-wrap

text-align: justify

text-decoration

text-transform

text-indent

letter-spacing

word-spacing

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

這個(gè)簡(jiǎn)單的 css語(yǔ)句，使用的比較多了吧，那么請(qǐng)解釋下 white-space 和 text-overflow，我尼瑪，并不會(huì)是不是。

white-space用來(lái)設(shè)置內(nèi)容中的空格的處理方式。

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

white-space: nowrap不換行，空格會(huì)被合并: 1. 第一行開(kāi)始我寫(xiě)了好多空格在實(shí)際效果中被合并成了一個(gè)；2. 然后中間又鍵入了回車(chē)，但是前端并未換行； 3.
是可以使文本換行的;

white-space: pre保留空格(包括鍵入的回車(chē)換行)，單行文本過(guò)長(zhǎng)時(shí)不會(huì)自動(dòng)換行,
在任何情況下都是可以生效的。
See the Pen

pre-wrap是pre 的升級(jí)版，當(dāng)單行文本過(guò)長(zhǎng)，超過(guò)文本邊界時(shí)自動(dòng)換行。請(qǐng)自行演示代碼。pre-line作為自學(xué)內(nèi)容。

用來(lái)定義當(dāng)文本超出容器邊界時(shí)如何處理。

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

看個(gè)極端點(diǎn)的例子： 給 div 寬度限定為 width:500px,然后 overflow: hidden 確定該 div 的 文本邊界，不能再多了，再然后 white-space: pre 保留空格，但是當(dāng)文本超出邊界時(shí)不會(huì)自動(dòng)換行，這樣每行文本就都超出了邊界，此時(shí)我們?cè)賴(lài)L試使用 text-overflow 進(jìn)行溢出限制。

See the Pen

那么現(xiàn)在就可以解釋單行文本溢出時(shí)加三個(gè)點(diǎn)顯示的代碼了：

white-space: nowrap; /*容器內(nèi)的文本單行顯示*/
overflow: hidden; /*確定文本邊界，容器的邊界就是文本的界限不可以突出去*/
text-overflow: ellipsis; /*超出的部分使用3個(gè)點(diǎn)代替*/

不要忘記思考： 多行文本溢出，省略顯示如何實(shí)現(xiàn)。

推薦大家閱讀你真的了解word-wrap和word-break的區(qū)別嗎、
word-wrap 和 word-break 問(wèn)答
斷字規(guī)則
每種語(yǔ)言都有各自的默認(rèn)斷字規(guī)則，在哪個(gè)位置可以插入break-points(斷點(diǎn))，當(dāng)需要換行顯示時(shí)，會(huì)根據(jù)這些斷點(diǎn)來(lái)決定從文字的哪個(gè)位置開(kāi)始換行。 比如漢字你好嗎的斷點(diǎn)你·好·嗎，中間的點(diǎn)表示斷點(diǎn)的位置； 比如英文hello world的斷點(diǎn)hello·world;

那么，我們可能想要改變這些默認(rèn)的斷點(diǎn)規(guī)則，word-break屬性就是做這個(gè)的，它會(huì)改變默認(rèn)的斷點(diǎn)規(guī)則。當(dāng)設(shè)置word-break: break-all;的時(shí)候，上面的漢字?jǐn)帱c(diǎn)規(guī)則并沒(méi)有改變，英文的斷點(diǎn)除了默認(rèn)的空白符和符號(hào)斷點(diǎn)外，還會(huì)在任意兩個(gè)字母之間添加斷點(diǎn)，也就是說(shuō)任意位置是可以斷開(kāi)的，此時(shí)英文hello world的斷點(diǎn)也就變?yōu)?b>h·e·l·l·o·w·o·r·l·d;

文字排版會(huì)按照斷字規(guī)則（瀏覽器規(guī)則或自定義規(guī)則）進(jìn)行排版，如果一個(gè)很長(zhǎng)很長(zhǎng)的單詞中間又是不可斷的時(shí)候word-wrap就可以上場(chǎng)了，word-wrap 是用來(lái)決定允不允許單詞內(nèi)斷句的，如果不允許的話(huà)長(zhǎng)單詞就會(huì)溢出。word-wrap: break-word它會(huì)首先嘗試將整個(gè)長(zhǎng)單詞挪到下一行，看看下一行的寬度夠不夠，不夠的話(huà)還會(huì)進(jìn)行單詞內(nèi)的斷句。

word-break: normal|break-all|keep-all;word-break的本質(zhì)是更改斷點(diǎn)規(guī)則， normal 正常規(guī)則，break-all 到處都可以斷，keep-all只能在半角空格或連字符處換行（試試長(zhǎng)中文的句子就明白了）。

See The Pen

word-wrap: normal|break-word;normal，只在允許的斷字點(diǎn)換行基于瀏覽器默認(rèn)設(shè)置或者 word-break 的設(shè)置。break-word它會(huì)首先嘗試將整個(gè)長(zhǎng)單詞挪到下一行，看看下一行的寬度夠不夠，不夠的話(huà)就進(jìn)行單詞內(nèi)的斷句。

綜上，我自己明白了，可能大家已經(jīng)被我繞暈了。

white-space、word-wrap、word-break 是不太好理解。沒(méi)解釋明白的話(huà)，請(qǐng)?zhí)D(zhuǎn)連接看看大牛們的文章。

若設(shè)置了 white-space 后，word-wrap 和 word-break又如何表現(xiàn)呢？ 請(qǐng)記住white-space 老大，word-break 老二，word-wrap 第三。如果設(shè)置了 white-space: nowrap，后兩者是不起作用的。

See the Pen

是不是都用過(guò) text-align: left | right;那么 justify 是干什么的呢？下圖是個(gè)常見(jiàn)的需求文字兩端對(duì)齊。

筆者曾經(jīng)使用 來(lái)打空格，真是 SB 啊，用這么 low 的方法明顯反應(yīng)出我既不會(huì) text-align 也不會(huì) white-space。

css的兩端對(duì)齊有個(gè)坑,最后一行的文字不會(huì)兩端對(duì)齊，而是左對(duì)齊。
推薦大家看看大漠的解釋?zhuān)?在其自然狀態(tài)下，"text-align:justify"就不能工作，除非內(nèi)容足夠長(zhǎng)并引起一個(gè)換行符。否則，文本仍然左對(duì)齊。如果你想知道這是為什么，這是因?yàn)樵谂虐嬷羞@是理想的行為——一個(gè)塊中的最后一行文本總是左對(duì)齊。也許這是一個(gè)CSS規(guī)范設(shè)計(jì)，即使我們只有一行文本，這一行還是像最后一行一樣，讓文本左對(duì)齊