## 文本效果 **1. text-overflow**是指文本溢出后用戶如何處理溢出的文本。 值：ellipsis 顯示省略符號來代表被修剪的文本。 clip 是默認值，直接將溢出的文本修剪，就直接不顯示 <br/> <br/> **2. white-space** 設置如何處理元素內的空白。 值： normal 默認。空白會被瀏覽器忽略。 pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <``pre``>標簽 nowrap 文本不會換行，文本會在在同一行上繼續，直到遇到 <`br`> 標簽為止。 pre-wrap 保留空白符序列，但是正常地進行換行。 pre-line 合并空白符序列，但是保留換行符。 inherit 規定應該從父元素繼承 white-space 屬性的值。 <br/> <br/> **3. word-wrap**允許長單詞或 URL 地址換行到下一行 值：break-word 在長單詞或 URL 地址內部進行換行。 （IE瀏覽器）連續的英文字符和阿拉伯數字,使用**word-wrap : break-word ;或者word-break:break-all;**實現強制斷行 <br/> <br/> **4.letter-spacing**設置英文字母之間或中文每個文字之間的空白。 值：normal : 　默認間隔 　　length : 　由浮點數字和單位標識符組成的長度值，允許為負值 **word-spacing**設置每個英文單詞之間的空白，對中文無效。 值：normal和length（長度） <br/> <br/> #### **列子：** **a.** 文字過多顯示省略號方法 答：text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 需要設置寬度 <br/> **b.** 無需設置寬度的文本省略方法 一行文本顯示省略號： .ellipsis{ overflow: hidden; ? text-overflow: ellipsis; ? display: -webkit-box; ? -webkit-line-clamp: 1; ? -webkit-box-orient: vertical; ? white-space: normal !important; ? word-wrap: break-word;? } 兩行文本顯示省略號： .ellipsis-2{ overflow: hidden; ? text-overflow: ellipsis; ? display: -webkit-box; ? -webkit-line-clamp: 2; ? -webkit-box-orient: vertical; ? white-space: normal !important; ? word-wrap: break-word;? } 3行以此類推，只要把 -webkit-line-clamp:后面的值改為3即可。