css 文字溢出隐藏

作者：—上花′Ing 发布日期:2026-01-07 浏览:22

/* 设置容器的宽度和高度，并设置溢出隐藏 */
.container {
  width: 200px;
  height: 50px;
  overflow: hidden;
  white-space: nowrap; /* 防止文字换行 */
  text-overflow: ellipsis; /* 当文字溢出时，用省略号表示 */
  border: 1px solid #000; /* 可选：添加边框以便更好地查看效果 */
}

<!-- 示例 HTML 代码 -->
<div class="container">
  这是一段非常长的文字，当它超出容器的宽度时，将会被隐藏并显示省略号。
</div>

解释说明：

overflow: hidden;：当内容超出容器的宽度或高度时，超出部分将被隐藏。
white-space: nowrap;：防止文字在容器内换行，确保所有文字都在同一行显示。
text-overflow: ellipsis;：当文字溢出容器时，使用省略号（...）来表示被截断的部分。

上一篇：下划线 css

下一篇：css 颜色代码