前端文字只展示俩（多）行，多出的用省略号表示。

htt2321

已于 2025-04-08 10:14:00 修改

阅读量648

点赞数 5

文章标签：前端 javascript 开发语言 css

于 2024-03-01 09:15:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43204464/article/details/136386656

版权

本文介绍了如何使用Webkit盒模型实现文本垂直排列，限制行数并处理文本溢出，强调在设置高度之前利用`-webkit-line-clamp`和`text-overflow`属性的重要性。

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

  display: -webkit-box; /* 使用弹性盒子布局 */
  -webkit-box-orient: vertical; /* 垂直方向排列 */
  overflow: hidden; /* 显示溢出部分 */
  -webkit-line-clamp: 2; /* 指定要显示的行数 */
  text-overflow: ellipsis; /* 文本溢出时显示省略号 */

提示：写完这些样式，就不要给盒子高度了。不然有了高度以后会少展示或者是多展示文字

如果不生效把下面的样式代码也加上去

white-space: normal; /* 确保文本正常换行 */
  word-wrap: break-word; /* 长文本也能自动换行 */
  word-break: break-all; /* 如果有长单词，可以中间断开换行 */