【10】css設置文字不換行,超過的部分用“...”代替


設置文字不換行,超過的部分用“...”代替

 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 210px;

除width屬性外,順序不要顛倒哦!
 
 
1.white-space

① normal 默認,空白會被瀏覽器忽略

② pre 空白會被瀏覽器保留。其行為方式類似HTML中的<pre>標簽

③ nowrap 文本不會換行,文本會在同一行上繼續,直到遇到<br>標簽(開始換行)為止

④ pre-wrap 保留空白符序列,但是正常地進行換行

⑤ pre-line 合並空白符序列,但是保留換行符

⑥ inherit 規定應該從父元素繼承white-space 屬性的值

2 word-break

① normal 使用瀏覽器默認的換行規則

② break-all 允許在單詞內換行

③ keep-all 只能在半角空格或連字符處換行

3 text-overflow

① clip : 修剪文本

② ellipsis : 顯示省略符號來代表被修剪的文本

③ string : 使用給定的字符串來代表被修剪的文本


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM