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;
}

当然这仅适用于稳固的背景，但大部分时间都是正文的情况。

以下是要点：

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

Answer 2

Webkit flexbox是半生不熟的，没有标准化！我不会说这是一个错误。甚至Opera也有自己处理钳位的方法，这非常烦人。

.last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-ellipsis-lastline;
}

您可以使用clamp.js来处理您的省略号，但如果您是像我一样的纯CSS解决方案的粉丝 - 请尝试： CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS

Answer 3

查看此Fiddle 我不知道为什么在你的CSS中它不起作用，改变了一些并做了一些实验，为我工作。：）

<强> CSS：

.line-clamp {
    text-align: justify;
    width : 155px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

<强> HTML

<div class="line-clamp">Why Line Clamp is not working with text align justify</div>

希望这对你有用，或者帮助你解决问题。

Answer 4

我解决了：

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

为什么Line Clamp无法使用text align justify

4 个答案: