-webkit-box-orient:vertical不生效问题记录

css文字隐藏

单行文本隐藏

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

多行文本隐藏

js
复制代码
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上下两行加上如下注释

js
复制代码
/*! autoprefixer: off */ 
-webkit-box-orient: vertical; 
/* autoprefixer: on */

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

js
复制代码
/* autoprefixer: ignore next */ 
-webkit-box-orient: vertical;

• 3.写内联样式

js
复制代码
<div style={{WebkitBoxOrient: 'vertical'}}>
    {{info.title}}
</div>

备注： 通过设置 display: -webkit-box; 和-webkit-line-clamp: 2;，我们将容器元素设置为仅显示两行文本。当文本超过两行时，将隐藏溢出部分，并通过text-overflow: ellipsis;显示省略号。

请注意，-webkit-line-clamp 是一个非标准的CSS属性，仅在WebKit浏览器上有效。 如果需要兼容其他浏览器，可以考虑使用JavaScript或其他CSS技术来实现类似的效果。 ————————————————