css文字隐藏 -webkit-box-orient:vertical不生效

能来帮帮胡桃吗

2023-09-24 351 阅读1分钟

css文字隐藏

单行文本隐藏

overflow:hidden; //超出的部分隐藏
text-overflow:ellipsis; //超出的文本显示...
white-space:nowrap; // 超出不换行

多行文本隐藏

overflow:hidden; 
display:-webkit-box;
text-overflow:ellipsis; 
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

-webkit-box-orient:vertical不生效

代码中写了-webkit-box-orient:vertical; ，但并没有生效，打开控制台发现并没有这行代码。

原因：

编译过程中属性丢失。

解决办法：

1.在-webkit-box-orient:vertical上下两行加上如下注释

/*! autoprefixer: off */ 
-webkit-box-orient: vertical; 
/* autoprefixer: on */

2.在-webkit-box-orient:vertical前加上如下注释

/* autoprefixer: ignore next */ 
-webkit-box-orient: vertical;

3.写内联样式

<div style={{webkitBoxOrient: 'vertocal'}}>
    {{info.title}}
</div>

参考