如何根据可用的div区域大小剪切长文本？

Question

我有一个文本和预览div区域。每当我在div区域放置长文本时，它就会溢出div区域。我尝试了text-wrap:normal，但它没有削减上下文，只显示了适合可用区域的文本。

如何根据可用的div区域大小剪切长文本？之后，我会把css read more按钮放到预览文本区域的末尾。

Answer 1

使用text-overflow: ellipsis;，当与overflow: hidden结合使用时，单行技术white-space: nowrap会在文本末尾添加...，并将其包含在父级的宽度内：

div {
  overflow: hidden;
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}

<div>
  my very long text is here my very long text is here
</div>
<a href="">[Continue to read]</a>

Answer 2

您必须为预览容器添加overflow：hidden样式，以便将不会显示容器之后的文本。

Answer 3

使用overflow: hidden属性。溢出被剪切，其余内容将不可见：

#preview-div {
    overflow: hidden;
}