Question

我需要将elipsis用于段落，但当我将高度从height:2.5em;更改为height:1.25em;时，省略号就会消失。

＆＃13;

.a {
  font-size: 13px;
  display: block;
  width: 100%;
  height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  margin-bottom: 10px;
}
.b {
  height:1.25em !important;
}

＆＃13;

<p class="a">
  This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>
<p class="a b">
  This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>

＆＃13;

Answer 1

通过降低高度，可以减少可显示的行数。因此，您必须减少-webkit-line-clamp值以匹配最大行数。在这种情况下，它是1：

.a {
  font-size: 13px;
  display: block;
  width: 100%;
  height: 1.25em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  margin-bottom: 10px;
}

<p class="a">
  This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>

Answer 2

问题是您将-webkit-line-clamp设置为2.您需要将其更改为1.

请记住，此方法非常脆弱，如果您向锚点添加填充并且可能难以在不同的视口中维护，则会中断。

在这里你应该考虑几件重要的事情。

首先，您可以设置行高。然后，您需要将每个线夹乘以线高，并将该值设置为最大高度。

例如：

max-height =（line-height）（ - webkit-line-clamp）

max-height =（13px）（2）

max-height = 26px

.a {
  font-size: 13px;
  line-height: 13px;
  max-height: 13px;
  display: block;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow-y: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  margin-bottom: 10px;
}

<p class="a">
  This is a cool text document and it has more than one line of informaion that gets displayed in the document manager. Please write about conjoined twins as well as the soccer team FC Barcelona. The more overlap between these two subjects mentioned and
  researched, the higher likliehood of your pitch getting acepted. Also, it should be in strictly QDAS format with the one and only George W. Bush
</p>

当我改变高度时，文本溢出的省略号消失了

2 个答案: