Memory River

记忆河,记今日之事忆往昔之流

vue项目打包-webkit-box-orient: vertical样式丢失

 \  2018-11-06 08:22:44

在本网站打包上线的时候,发现有个地方本来使用样式控制了两行显示,超出用省略号的,如下

.excerpt .blogContent{
        font-size: 14px;
        color: #8a8a8a;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

在本地启动时正常的,但是打包发布之后就不正常了,没有达到预期的效果。就F12看了一下样式,原来是有样式丢失了。

-webkit-box-orient: vertical

这句css样式在vue打包的时候并没有打包上去。


解决方法:

用两行注释,将丢失的css包起来就可以了。

    .excerpt .blogContent{
        font-size: 14px;
        color: #8a8a8a;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
    }
标签: vuecss样式丢失
地址: http://wchuf.com/article/adt/6ab686b86409409abfa227c43ac6ef25.html
声明: 本文为原创文章,版权归本站所有,欢迎分享本文,转载请保留出处!
                 

YOU MIGHT ALSO LIKE

COMMENTS
想对博主说些什么?