css 多行显示省略号 兼容ie

CSS 提供了很多实用的样式能力，比如文本省略号的处理。在某些情况下，文本需要跨越多行展示，但是在设计上又需要显示省略号。下面我们就来分享一下 CSS 多行显示省略号，同时兼容 IE 的解决方案。

/* 多行省略号 */.ellipsis {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
     /* 显示文本的行数 */  overflow: hidden;
      text-overflow: ellipsis;
}
    

上述代码中，我们使用了 -webkit-box 这个新的 CSS 属性，它是 Webkit 内核浏览器对 Flexbox 布局的实现。在使用该属性时，需要指定 -webkit-box-orient: vertical，这样就可以垂直方向布局了。

接下来是 -webkit-line-clamp 属性，该属性可以控制文本在多少行后显示省略号。使用时需要指定一个数字，表示需要展示的行数。

overflow 属性用于控制文本溢出后的展示方式，我们设置为 hidden，以此来隐藏多余的文本。

最后是 text-overflow 属性，用于设置文本溢出后的表示方式，我们这里设置为 ellipsis，以此来代表省略号的展示。

那么，当我们需要在代码中使用该样式时，只需要在指定的元素上加上 .ellipsis 类名即可：

p class="ellipsis">
    多行文本展示，同时显示省略号。/p>

最后需要注意的一点是，CSS 提供的上述样式特性，仅在 Webkit 内核浏览器上有效。但是，为了兼容 IE，我们可以在该样式代码中加入以下代码：

/* 兼容 IE */.ellipsis {
      display: -webkit-box;
       display: -webkit-flex;
       display: flex;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
       overflow: hidden;
       text-overflow: ellipsis;
}
    

当这个样式应用于 IE 中时，需要先把 flexbox 属性设置为 -webkit-box，即：display: -webkit-box。这样，就可以兼容不同浏览器的需求了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！