css span超过宽度自动隐藏

在 CSS 中，如果一个 span 元素的内容超过了其所在容器的宽度，我们可以通过设置文本溢出时隐藏并添加省略号来解决这个问题。

span {
  display: inline-block;
  white-space: Nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

上面的代码中，我们将 span 元素设置为内联块级元素，这样它可以设置宽度，并且不会破坏行模型。我们将 white-space 设置为 Nowrap，以保证文本不会自动换行。接着，我们将 overflow 设置为 hidden，这样当内容超出容器时，它会被隐藏。最后，我们使用 text-overflow 设置文本溢出时的省略号，以表示文本被裁剪。同时，我们将 max-width 设置为 100%，以确保无论容器的尺寸如何变化，文本都不会超出容器。

需要注意的是，如果你使用了字体大小较小的文本，可能会出现省略号覆盖住最后一个字符的现象。在这种情况下，你可以通过增加容器的宽度或者增大字体大小来解决这个问题。