nuxt项目中设置多行文本溢出显示...不生效

最新推荐文章于 2024-03-14 00:27:29 发布

weixin_40553958

最新推荐文章于 2024-03-14 00:27:29 发布

阅读量360

点赞数

CC 4.0 BY-SA版权

分类专栏： nuxt vue

本文链接：https://blog.youkuaiyun.com/weixin_40553958/article/details/90708588

nuxt 同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

博客提到平时使用的代码设置样式不生效，但行内样式可以生效。经搜索发现 -webkit-box-orient:vertical;未设置成功，还给出了网友提供的优化代码。

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

平时是使用下面这段代码

overflow: hidden;    /*超出的文本隐藏*/
text-overflow: ellipsis;    /* 溢出用省略号*/
display: -webkit-box;    /*作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 1;   /*显示的行数；*/
-webkit-box-orient: vertical;   /*伸缩盒子的子元素排列：从上到下*/

设置之后不生效

如果使用行内样式却是可以生效！

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

-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
/* autoprefixer: on */

完毕！