标签内text文本多行显示，多余字符自动隐藏省略号显示

最新推荐文章于 2024-08-21 14:08:08 发布

QALink

最新推荐文章于 2024-08-21 14:08:08 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web开发

本文链接：https://blog.csdn.net/qq_37904799/article/details/79772148

web开发专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种使用CSS技巧解决多行文本溢出问题的方法。通过设置word-break、text-overflow、display等属性，可以实现当文本内容超过指定行数时自动截断并显示省略号的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天弄到一个显示电影详情的模块时，发现电影简介栏内如果字符过多，字就会溢出div容器，（真是难看！），然而我只知道关于单行内字符多余时按省略号显示的css样式，所以特意看了一下腾讯视频网页上的源代码，copy了一个技能

css样式代码：

word-break: break-all;/*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden;  /** 隐藏超出的内容 **/