css 多行省略兼容写法

CSS中的多行省略是指在宽度不足时，超出部分省略显示，目前主要有三种写法：单行省略、两行省略和三行省略。但是由于不同浏览器对多行省略的支持不同，因此需要使用兼容写法来确保在不同浏览器下都能正常显示。

/* 单行省略 */.single-line-ellipsis {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}
/* 两行省略 */.two-line-ellipsis {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
}
/* 三行省略 */.three-line-ellipsis {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
}
    

在兼容写法中，-webkit-是针对webkit内核浏览器（如Safari、Chrome）的前缀，-moz-是针对Gecko内核浏览器（如Firefox）的前缀，-ms-是针对IE浏览器的前缀，-o-是针对Opera浏览器的前缀。

需要注意的是，不同的浏览器对多行省略的支持程度不同，例如Safari和Chrome对单行和两行省略都有很好的支持，但对三行省略的支持就不太好，表现为第三行文字会被截断而不是省略显示。因此在实际开发中，需要根据具体情况选择合适的多行省略写法，并在测试中确保在目标浏览器下能够正常显示。

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