两行或三行（多行）文本溢出显示...不生效

Beamon__

于 2018-09-18 14:34:36 发布

阅读量1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： css react 文章标签： css react

本文链接：https://blog.youkuaiyun.com/Beamon__/article/details/82757172

react 同时被 2 个专栏收录

14 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍如何在React项目中实现文本长度限制为两行并溢出显示省略号的效果。通过调整CSS样式，包括使用-webkit-box、-webkit-box-orient及-webkit-line-clamp属性，并解决了一些兼容性和样式未生效的问题。

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

就在刚刚需要在react项目写一个限制文本长度两行，溢出显示省略号的场景，但是没有生效，经过查阅，得到以下解决方法，供参考～

初次写法：

.item-title{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

但是没有生效～，查看盒模型

发现-webkit-box-orient:vertical;并未设置成功，据大神网友提供解决方案，优化代码如下：

.item-title{
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box;
    /* autoprefixer: off */
    -webkit-box-orient:vertical;
    /* autoprefixer: on */
    -webkit-line-clamp:2; 
}

成功设置！

总结：在-webkit-box-orient:vertical;时，添加如上注释进行包裹！

参考地址：https://github.com/postcss/autoprefixer/issues/776