CSS超出隐藏省略号详解

一、CSS超出显示省略号

CSS中的text-overflow属性可以控制当文本溢出容器时的显示行为。如果设置为ellipsis，就会在文本的末尾显示三个省略号。

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

这个例子中，设置white-space属性为nowrap，让文本在一行内显示；设置overflow：hidden，超出的文本隐藏；最后设置text-overflow：ellipsis，让省略号显示在文本的末尾。

可以将.class-name也可以设置为*，表示该效果将应用于所有元素。

二、CSS超出隐藏

该效果可以通过给定元素设置max-width和overflow：hidden样式来实现。当元素的内容超出其宽度时，超出部分将隐藏。

.example2 {
    max-width: 200px;
    overflow: hidden;
}

这个例子中，设置容器的最大宽度为200px，超出的部分将被隐藏。

三、CSS超出部分显示省略号

在一些特定的设计场景下，可能不仅要在文本末尾显示省略号，还需要在其余省略号之前显示超出的部分。可以使用伪元素来实现这种效果。

.example3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.example3::before {
    content: attr(title);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

这个例子中，通过设置.container::before的content属性，它显示了元素title属性的值。对于。例中的HTML元素

  
很长很长的一段文字，似乎超过了 .example3的宽度
  

四、CSS隐藏超出不显示三个点

有时候我们不需要显示超出部分也不需要省略号，可以设置text-overflow：clip来隐藏超出文本。

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

这个例子中，设置text-overflow：clip可以隐藏溢出的内容而不显示三个点。

总结

我们使用text-overflow属性，可以灵活地控制文本在超出容器时的处理行为。让文本显示恰到好处，达到更好的用户体验。