为什么 Line Clamp 不能与文本对齐一起使用

Question

为什么-webkit-line-clamp没有显示正确的省略号text-align:justify。它与 一起工作得很好text-align:left/right。

请提出任何技巧。

div {
    text-align: justify;
    width:150px;
    padding: 0 5px;
    line-height: 18px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div>Why Line Clamp is not working with text align justify</div>

Answer 1

您尝试使用的解决方案是一种非常古老的技术。它使用旧版本的display: flex;, 应避免使用。

您可以使用JavaScript技术clamp.js，但我也创建了这个纯CSS版本：http://codepen.io/n3ptun3/pen/meYKgZ? editors=110

CSS

p {
  position: relative;
  width: 400px;
  height: 120px;
  line-height: 30px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  text-align: justify;
}

p::after {
  content: "...";
  background-color: #fff;
  height: 30px;
  width: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

当然，这只适用于纯色背景，但大多数情况下，正文都是这种情况。

以下是要点：

1. 将行高设置为您喜欢的任何值。
2. 将高度设置为行高的倍数。
3. 将溢出设置为隐藏。
4. 将省略号添加到 after 伪元素并将其背景颜色设置为段落背景颜色。