css 多行省略号兼容ie

CSS 多行省略号是一种在文本溢出时使用省略号来表示截断的方法。 然而，在 Internet Explorer 中实现多行省略号并不容易，因为它不支持CSS3 规范中的 text-overflow: ellipsis 属性。 因此，我们需要一些其他的方式来实现其效果。

在 IE 中实现多行省略号的方法，需要结合 两个 CSS 属性：-ms-text-overflow 和 -ms-line-clamp。

首先，我们应该使用以下代码来指定需要省略的文本块：

.text-block{
      width: 300px;
      height: 100px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
 /* 如果是固定行数请使用数字 */}

在以上例子中，我们指定了一个文本块的宽度和高度，并用overflow:hidden 把多余的文本隐藏起来，然后使用-webkit-box 属性来把文本块变成一个 flexbox 容器，并指定它们排列方向为垂直方向，最后指定文本最多显示3行，超出部分使用省略号表示。

现在，我们要使用- ms-line-clamp 属性来达成类似的效果。 然而，这个属性只支持IE9+，因此我们需要使用前缀 -ms- 来实现它。

.text-block {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
     /* 如果是固定行数请使用数字 */  -ms-line-clamp: 3;
     /* 如果是固定行数请使用数字 */  -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
}
    

在以上代码中，我们将 -ms-line-clamp 属性设置为我们需要文本显示的最大行数，然后再使用 -ms-text-overflow: ellipsis 来显示省略号。 最后，我们已经实现了 IE 中的多行省略号效果。

总结一下，在 IE 中实现多行省略号的步骤如下：

1. 指定需要省略的文本块的宽度和高度，使用 overflow:hidden; 来隐藏多余文本；
2. 使用 -webkit-box 属性来将文本块转换为 flexbox 容器，并指定排列方向为垂直方向，使用 -webkit-line-clamp 属性来限制文本最多显示几行。
3. 使用 -ms-line-clamp 属性来实现类似的效果，再加上 -ms-text-overflow: ellipsis 来显示省略号。

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