css设置内容超出范围用省略号表示
标签内容为:明天就周末了
设置后的效果图如下:
实现代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>css设置内容超出范围用省略号表示</title> 5 <style type="text/css"> 6 p{ 7 width: 50px; 8 height: 20px; 9 /*把超出的内容进行隐藏*/ 10 overflow: hidden; 11 /*设置内容不换行*/ 12 white-space: nowrap; 13 /*设置超出内容为省略号*/ 14 text-overflow: ellipsis; 15 } 16 </style> 17 </head> 18 <body> 19 <p>明天就周末了</p> 20 </body> 21 </html>
注意代码行:9-14行