當在html中某個地方添加文本內容的時候如果內容過長我們會希望他超過一定寬度之后,其余的可以被截斷,后面補充為省略號;
實現方式:
1、設置css樣式為文本不換行;
2、位包裹文本的標簽指定寬度;
3、設置自動隱藏超出的內容;
4、設置超出的文本使用省略號;
CSS代碼如下:
1 width: 200px; 2 overflow: hidden; 3 font-size: large; 4 white-space: nowrap; 5 text-overflow: ellipsis;
舉個栗子:
<html> <head></head> <body style="padding: 20px;"> <div style="width: 200px;overflow: hidden;font-size: large;white-space: nowrap;text-overflow: ellipsis;"> 你好,我是用來測試的文字,我現在可以出現省略號 </div> </body> </html>
運行效果:
OK!