解决react 多行文本显示省略号不生效问题

末蓝、 2023-02-22 08:28 7阅读 0赞

在普通的前端css中，如果要是文本超出一行就显示省略号，一般在css中写：

.box {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }

要想多行文本显示省略号（这里不考虑兼容情况），一般这样写：

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

但是上面这种写法在react项目中不生效，经过查阅后是发现编译后-webkit-box-orient: vertical;  
解决这个问题有三种情况：

1.  可以去下载插件optimize-css-assets-webpack-plugin，然后在webpack中做相关插件配置（我没有试过，但是网上有vue项目这么做过）
2.  第二种方法就是使用内联样式，在需要用到这个css的时候就在那加，比如：

<p style={
       { WebkitBoxOrient: "vertical" }}>
    111111111111111111111111
    </p>

1.  或在less文件中-webkit-box-orient: vertical;上面加一行如下过滤：`/* autoprefixer: ignore next */`

.box {
    	 overflow : hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         /* autoprefixer: ignore next */
         -webkit-box-orient: vertical;
    }

这样就能在react中也能实现多行文本超出显示省略号了

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关单行、多行文本溢出以省略号显示

//单行文本溢出 .one\{　　　width: 200px; 　　border: 1px solid \000; 　　overflow: hidden; //溢出

超、凢脫俗/ 2023年08月17日 17:02/ 0 赞/ 171 阅读

相关解决react 多行文本显示省略号不生效问题

在普通的前端css中，如果要是文本超出一行就显示省略号，一般在css中写： .box { overflow: hidden; text-ove

末蓝、/ 2023年02月22日 08:28/ 0 赞/ 8 阅读

相关多行文本超出隐藏显示省略号

先看下单行文本 white-space: nowrap; /文本不换行/ text-overflow: ellipsis;

╰+攻爆jí腚メ/ 2023年02月16日 06:59/ 0 赞/ 67 阅读

相关 css多行文本溢出省略号显示

一、通过css来定义行数 .contents { width: 200px; // 定义宽度 border: 3px solid eee;

朴灿烈づ我的快乐病毒、/ 2022年11月04日 11:13/ 0 赞/ 6 阅读

相关 CSS实现单行、多行文本溢出显示省略号（…）

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，word-break: 当字符和数字混合的时候也可以不换行。实现方法：

一时失言乱红尘/ 2022年06月07日 05:05/ 0 赞/ 269 阅读

相关多行文本溢出显示省略号

转载：http://www.css88.com/archives/5206 单行文本的溢出显示省略号大家应该都知道用`text-overflow:ellipsis`属

女爷i/ 2022年05月21日 02:35/ 0 赞/ 308 阅读

相关 css 多行文本溢出显示省略号(…)，显示3行多出的显示省略号

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line

ゝ一纸荒年。/ 2022年03月22日 14:01/ 0 赞/ 513 阅读

相关 css实现多行文本溢出显示省略号

上代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

柔情只为你懂/ 2021年09月18日 07:54/ 0 赞/ 490 阅读

相关 CSS实现单行、多行文本溢出显示省略号（…）

[CSS实现单行、多行文本溢出显示省略号（…）][CSS] 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然

古城微笑少年丶/ 2021年09月02日 09:38/ 0 赞/ 497 阅读

相关 react 单行多行文本溢出显示省略号...

文本溢出处理单行文本溢出单行文本溢出，可直接用css处理，很简单 .ellipsis { overflow: hidden; ...

红太狼/ 2020年11月07日 03:55/ 1 赞/ 945 阅读