Question

.textarea {
  display: block;
  width: 400px;
  margin-bottom: 20px;
  border: 1px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.clip {
  text-overflow: clip;
}

.ellipsis {
  text-overflow: ellipsis;
}

<div class="textarea clip">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five </p>
</div>
<div class="textarea ellipsis">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

在设置值text-overflow:ellipsis之后，我没有得到三个点（...），如果有更多文本，宽度不足以容纳所有文本。

我尝试了不同的宽度值，但没有要求的结果。

Answer 1

由于overflow和text-overflow不是继承的属性而您已将其应用于.textarea，因此不会对<p>产生任何影响。

您可以将white-space:nowrap应用于.textarea，因为它是一个继承的css属性。

所以将overflow:hidden和text-overflow应用于<p>而不是.textarea ..

此外，您在上述代码中出现拼写错误... textarea将为.textarea，因为它的类不是标记

Stack Snippet

.textarea {
  display: block;
  width: 400px;
  margin-bottom: 20px;
  border: 1px solid black;
  white-space: nowrap;
}

.clip p {
  text-overflow: clip;
  overflow: hidden;
}

.ellipsis p {
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="textarea clip">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five </p>
</div>
<div class="textarea ellipsis">
  <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>

无法看到文本溢出的影响

1 个答案: