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

Question

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

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

Answer 1

使用text-overflow: ellipsis; ，当与overflow: hidden和单行技术white-space: nowrap结合使用时， 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

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

Answer 3

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

#preview-div {
    overflow: hidden;
}