你可以使用CSS中的 text-overflow
属性来实现这个效果。
以下是一个例子,当一个元素(例如 div
)中的文本太长时,它会被截断并以省略号结束:
<div class="example">
This is an example of text that is too long to fit in a div and will be truncated.
</div>
.example {
white-space: nowrap; /* 保持文本在一行 */
overflow: hidden; /* 隐藏超出容器范围的文本 */
text-overflow: ellipsis; /* 文本超出时显示省略号 */
}
在这个例子中,white-space: nowrap
属性确保文本在一行中显示。 overflow: hidden
属性隐藏了超出容器范围的文本。 text-overflow: ellipsis
属性添加了省略号来指示截断的文本。
你可以根据自己的需要调整div
的样式,如 width
和 height
等。