css 一行省略号

作者：浪推晚风发布日期:2025-04-01 浏览:97

.text-ellipsis {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
  width: 200px; /* 设置一个固定宽度，可根据需要调整 */
}

解释说明：

white-space: nowrap;：防止文本换行，确保所有内容都在一行内显示。
overflow: hidden;：超出容器宽度的部分会被隐藏，不会溢出到外部。
text-overflow: ellipsis;：当文本超出容器宽度时，使用省略号（...）来表示被截断的文本。
width: 200px;：设置一个固定的宽度，以确保有明确的边界来触发省略号效果。可以根据实际需求调整这个宽度。

HTML 示例：

<div class="text-ellipsis">
  这是一段非常长的文本，将会在一行为止并显示省略号。
</div>

上一篇：css 换行

下一篇：css 图片垂直居中