one more time one more chance. 一歩重頭學前端, css入門。white-space
text-overflow: ellipsis;
word-break, word-wrap
text-align: justify
text-decoration
text-transform
text-indent
letter-spacing
word-spacing
.truncatewhite-space用來設定內容中的空格的處理方式。
white-space：normal | pre | nowrap | pre-wrap | pre-linewhite-space: nowrap不換行，空格會被合併: 1. 第一行開始我寫了好多空格在實際效果中被合併成了乙個；2. 然後中間又鍵入了回車，但是前端並未換行； 3.
是可以使文字換行的;
white-space: pre保留空格(包括鍵入的回車換行)，單行文字過長時不會自動換行,
在任何情況下都是可以生效的。
see the pen
pre-wrap是pre 的公升級版，當單行文字過長，超過文字邊界時自動換行。請自行演示**。pre-line作為自學內容。
用來定義當文字超出容器邊界時如何處理。
/*切斷 | 使用省略號 | 使用自定義的字串*/
text-overflow: clip|ellipsis|string;
see the pen
那麼現在就可以解釋單行文字溢位時加三個點顯示的**了：
white-space: nowrap; /*容器內的文字單行顯示*/
overflow: hidden; /*確定文字邊界，容器的邊界就是文字的界限不可以突出去*/
text-overflow: ellipsis; /*超出的部分使用3個點代替*/
推薦大家閱讀你真的了解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-break 老二，word-wrap 第三。如果設定了 white-space: nowrap，後兩者是不起作用的。
see the pen
是不是都用過 text-align: left | right;那麼 justify 是幹什麼的呢？下圖是個常見的需求文字兩端對齊。
筆者曾經使用css的兩端對齊有個坑,最後一行的文字不會兩端對齊，而是左對齊。
推薦大家看看大漠的解釋： 在其自然狀態下，"text-align:justify"就不能工作，除非內容足夠長並引起乙個換行符。否則，文字仍然左對齊。如果你想知道這是為什麼，這是因為在排版中這是理想的行為——乙個塊中的最後一行文字總是左對齊。也許這是乙個css規範設計，即使我們只有一行文字，這一行還是像最後一行一樣，讓文字左對齊?。
如何保證兩端對齊呢？ 人為插入一行東西,使得文字處於倒數第二行。
see the pen
文字裝飾text-decoration : none | underline | blink | overline | line-through
在修飾 a 標籤時用的較多用於去除下劃線。
atext-transform: none | capitalize | uppercase | lowercase
see the pen
控制首行縮排，有了它也不用了,簡單好用。
psee the pen
你真的了解word-wrap和word-break的區別嗎、
word-wrap 和 word-break 問答
斷字規則
text-align:justify和rwd
text-align:justify兩端對齊有個坑
【開發環境推薦】
css 控制文字
css 文字屬性可定義文字的外觀。通過文字屬性，可以改變文字的顏色 字元間距，對齊文字，裝飾文字，對文字進行縮排，等等。l 基本屬性 屬性描述 示例color 設定文字顏色 color red background color 背景顏色 text align 對齊方式 text align cent...
css控制文字排版
b 一 如何設定文字字型 顏色 大小 使用font b font style設定斜體，比如font style italic font weight設定文字粗細，比如font weight bold font size設定文字大小，比如font size 12px 或者9pt，不同單位顯示問題參考c...
css控制文字換行
設定為break word時，文字中的長單詞或url可以換行 換行換行換行換行換行換行換行換行aaaaaaaaaaaaaaaa 新增換行後的效果 若css不設定word wrap，遇到長單詞時內容溢位，效果如圖所示 設定為break all時，文字遇到長單詞，會選擇在合適的位置截斷進行換行 換行換行...