上海平面设计公司排行榜北京seo案例

        在实际项目场景当中，我们经常会遇到需要对超长文本溢出省略的场景：

我们经常会这样写——

单行省略：

    overflow: hidden; //文本溢出隐藏text-overflow: ellipsis; //文本溢出显示省略号white-space: nowrap; //不换行

多行省略：

      display: -webkit-box; /**对象作为伸缩盒子模型展示**/-webkit-box-orient: vertical;-webkit-line-clamp: 2; /**显示的行数**/overflow: hidden; /**隐藏超出的内容**/text-overflow: ellipsis; /* 溢出显示省略号 */

        在一个新项目中，我需要设置两行溢出省略，然后我还是按照旧的方式写上去，这个时候我发现，在页面中并没有生效。。。

        然后我去查看了浏览器上面生效的样式属性，如图：

        这个时候我们会发现，-webkit-box-orient: vertical;这个属性没有在浏览器生效，丢失了！然后我去查找了相关资料，再代码中加了一行/* autoprefixer: ignore next */，如下：

      display: -webkit-box; /**对象作为伸缩盒子模型展示**//* autoprefixer: ignore next */-webkit-box-orient: vertical;-webkit-line-clamp: 2; /**显示的行数**/overflow: hidden; /**隐藏超出的内容**/text-overflow: ellipsis; /* 溢出显示省略号 */

        浏览器样式渲染 

        此时浏览器上便可以按照我们的预期正常展示了！