css 省略号表示溢出文本

作者：刺眼的男ren 发布日期:2025-06-25 浏览:78

/* 示例代码：使用 CSS 实现省略号表示溢出文本 */

.text-ellipsis {
  /* 设置元素为块级元素或行内块级元素 */
  display: inline-block;

  /* 设置最大宽度，确保文本超出时会触发溢出处理 */
  max-width: 200px;

  /* 隐藏溢出的文本 */
  white-space: nowrap;

  /* 溢出文本用省略号表示 */
  overflow: hidden;

  /* 显示省略号 */
  text-overflow: ellipsis;
}

解释说明：

display: inline-block;：确保元素可以设置宽度，同时不影响布局。
max-width: 200px;：限制元素的最大宽度，当文本超出这个宽度时会触发溢出处理。
white-space: nowrap;：防止文本换行，确保文本在一行内显示。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，使用省略号（...）来表示被截断的文本。

上一篇：scss转css在线

下一篇：css min