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

Question

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

如何根据可用的 div 区域大小剪切长文本？之后，我会将 css 阅读更多按钮放在预览文本区域的末尾。

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>