text-overflow 是一个CSS属性,用于控制当文本溢出其包含框时的表现方式。它通常与 overflow 和 white-space 属性一起使用。

常见的值包括:

  •  clip:默认值,表示文本溢出时将其裁剪,不显示溢出部分。

  •  ellipsis:表示文本溢出时显示省略号(...)来指示被省略的文本。

  •  string:可以指定自定义的字符串来显示在溢出文本的末尾。


示例:
/* 当文本溢出时裁剪 */
div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* 当文本溢出时显示省略号 */
p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 当文本溢出时显示自定义字符串 */
span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "Read more";
}

在上述示例中,通过设置 white-space: nowrap; 和 overflow: hidden; 来限制文本在一行内,并且当文本溢出时,text-overflow 属性来定义相应的处理方式。这对于处理长文本或导航栏中的溢出文本很有用。需要注意的是,text-overflow 在块级元素中通常与一些其他属性一起使用,以实现期望的效果。


转载请注明出处:http://www.zyzy.cn/article/detail/4259/CSS