vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题

最新推荐文章于 2025-03-20 16:02:53 发布

转身、时光不再

最新推荐文章于 2025-03-20 16:02:53 发布

阅读量3.5k

点赞数 2

分类专栏： vue项目问题文章标签： vue webpack CSS

本文链接：https://blog.youkuaiyun.com/qq_25335529/article/details/80268309

版权

vue项目问题专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决webpack打包后-webkit-box-orient属性丢失的问题。通过在属性前后添加特殊注释，成功解决了该问题。

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

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。如下图：

.topic-info {
        margin: 5px 10px;
        font-size: .8em;
        text-indent: 2em;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

后来在网上查询一番，发现可能是optimize-css-assets-webpack-plugin这个插件的问题，其实解决办法很简单，只需要在这个属性前后加一个特殊注释即可，如下图：

.topic-info {
        margin: 5px 10px;
        font-size: .8em;
        text-indent: 2em;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        overflow: hidden;
        text-overflow: ellipsis;
      }

参考链接： https://segmentfault.com/q/1010000009360389