多行文本的跨浏览器省略答案

【问题标题】：Cross browser ellipsing of multiline text多行文本的跨浏览器省略
【发布时间】：2018-08-31 19:21:26
【问题描述】：

我希望在所有浏览器上通过省略来截断超过两行的多行文本。 text-overflow: ellipsis 不适用于多行文本。使用 line-clamp 属性不适用于 IE、Edge 和 Firefox，因为这些浏览器尚不支持它。我提到了http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/并使用了以下

@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}

.multiline-ellipsis {
  @include multiLineEllipsis($lineHeight: 1.4em, $lineCount: 2);
}

现在，在包括 IE、Edge 和 Firefox 在内的所有浏览器上，这会省略超过两行的文本，但它会在文本中的单词之间添加额外的空格。如何解决这个问题？

谢谢

【问题讨论】：

标签： css ellipsis

【解决方案1】：

css word-spacing 属性指定单词之间的间距，您可以使用相对（负）值来减少对齐间距：

text-align:justify;
word-spacing:-2px;

https://www.w3schools.com/cssref/pr_text_word-spacing.asp

【讨论】：