CSS超出长度范围显示省略号

发布时间 2023-12-06 18:06:00作者: 幽暗天琴

要在CSS中实现超出长度显示省略号的效果,你可以使用以下属性:

  1. overflow:该属性定义了当内容溢出元素框时发生的事情,此处我们将它设为hidden,意味着溢出的内容会被隐藏。
  2. white-space:该属性设置如何处理元素内的空白,我们将其设为nowrap,这样文本就不会自动换行。
  3. text-overflow:此属性定义如何显示被覆盖的溢出内容,我们将其设为ellipsis,这样就会在文本末尾显示省略号(...)。

示例代码如下:

 
  .ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

然后,将该样式应用到你的HTML元素上,例如:

 
  <div class="ellipsis">这是一段很长的文本,会超出容器的范围。</div>

这样,当文本长度超出div容器的宽度时,就会在文本末尾显示省略号。