css中限制行数( -webkit-line-clamp)出现三个点在打包时失效的解决方案

最新推荐文章于 2025-05-29 15:09:40 发布

daoke_li

最新推荐文章于 2025-05-29 15:09:40 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端移动开发前端文章标签： html5 css css3 webkit 前端

本文链接：https://blog.csdn.net/daoke_li/article/details/105426139

前端同时被 2 个专栏收录

95 篇文章

订阅专栏

前端移动开发

32 篇文章

订阅专栏

本文介绍在基于-webkit内核的浏览器中，如何通过CSS属性限制多行文本显示并用省略号表示超出部分的方法。同时，提供了一个实用的技巧来避免webpack等打包器自动舍弃非正式规范的CSS属性。

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

在基于-webkit内核的浏览器中，多行文本限制行数，比如超过2行时，第二行结尾用三个点表示，实现如下：

h4{
    display: -webkit-box; 
    overflow: hidden; 
    -webkit-line-clamp:2; 
    -webkit-box-orient: vertical;
}

可以看出，后面两行有 -webkit 前缀，就是这个属性还没正式化，所以在webpack等打包器工作时会自动舍弃掉不规范的属性，导致没有生效。如何解决呢？除了修改繁琐的配置文件让把不符合规范的属性放行之外(实际上这样做也有安全隐患)，还有个小技巧——把属性写到纯css中：在根html中使用<style>添加css(不是js中的css，也不是less、sass等)，定义类，然后再使用的时候引用类名即可：

1，定义类

.line-clamp2{
    display: -webkit-box; 
    overflow: hidden; 
    -webkit-line-clamp:2; /* 2表示限制为2行 */
    -webkit-box-orient: vertical;
}

2，页面内引用（react）

<h4 className={'line-clamp2'}>{item.title}</h4>

附：单行文本超出给定宽度出现三个点的实现方法

h4{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 6rem; 
}