html - 无法看到文字溢出的影响

.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之后，如果存在更多的文本（宽度不足以容纳所有文本），我将不会得到三个点（...）。

我尝试使用不同的宽度值，但是没有必要的结果。

最佳答案

因为overflow和text-overflow不是继承的属性，并且已将其应用于.textarea，所以不会对<p>产生影响。

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

因此，将overflow:hidden和text-overflow应用于<p>而不是.textarea。

另外您在上面的代码中有错别字错误... textarea将是.textarea，因为它是一个类而不是标签

堆栈片段

.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>