本文介绍了一种使用CSS实现文本溢出处理的方法，包括单行文本和多行文本的处理技巧，通过设置宽度、高度、行高、文本溢出样式等属性，使得网页元素能够优雅地展示大量文本内容，提高用户体验。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style type="text/css"> /*单行==所有浏览器*/ #test{ width:150px;height:20px;line-height:20px; text-overflow:ellipsis;white-space:nowrap;overflow:hidden; } /*多行==高版本浏览器和手机端可以用*/ #test2{ width:150px;line-height:20px;/*height:60px;*/ display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow: hidden; } </style> <div id="test">小虾奋斗起来吧加油加油加油加油加油加油</div> <br /><br /><br /> <div id="test2">小虾奋斗起来吧加油加油加油加油加油加油小虾奋斗起来吧加油加油加油加油加油加油小虾奋斗起来吧加油加油加油加油加油加油</div> </body> </html>
扫一扫
2885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
