設置文字不換行,超過的部分用“...”代替
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 : 使用給定的字符串來代表被修剪的文本