文本换行（省略号效果）

最新推荐文章于 2024-03-28 14:59:10 发布

Miketutu

最新推荐文章于 2024-03-28 14:59:10 发布

阅读量193

点赞数

文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/Miketutu/article/details/129067802

版权

文章介绍了如何使用CSS样式`overflow`、`white-space`和`text-overflow`来实现单行文本的溢出隐藏并显示省略号，以及如何结合WebKit的CSS扩展属性`-webkit-line-clamp`和`-webkit-box`来处理多行文本的溢出情况，适用于WebKit浏览器和移动端。

摘要由CSDN通过智能技术生成

单行文本换行：

第一步： 溢出隐藏 */
       overflow: hidden;
       /* 第二步：让文本不会换行， 在同一行继续 */
       white-space: nowrap;
       /* 第三步：用省略号来代表未显示完的文本 */
       text-overflow: ellipsis;

多行文本换行：

魏什么(2685836090)  18:42:50
多行文本
.box {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;

魏什么(2685836090)  18:42:56
这是多行文本

效果图：