css文字超出自动缩小

要让 CSS 中的文字自动缩小，你可以使用 CSS 中的 `text-overflow` 和 `white-space` 属性。以下是一些示例代码：

/* 让文字超出时省略号出现并缩小 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px; /* 初始字体大小 */
  max-width: 200px; /* 最大宽度 */
}

/* 让文字自动缩小以适应容器 */
.auto-shrink {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.auto-shrink span {
  display: inline-block;
  max-width: 100%;
  font-size: 16px; /* 初始字体大小 */
  transition: font-size 0.3s ease-in-out;
}

.auto-shrink:hover span {
  font-size: 12px; /* 缩小后的字体大小 */
}

在第一个示例中，`.ellipsis` 类会让超出宽度的文字显示省略号并缩小。你可以根据需要修改 `font-size` 和 `max-width` 属性的值。在第二个示例中，`.auto-shrink` 类会让文字自动缩小以适应容器，并在鼠标悬停时缩小字体。这个示例需要使用 JavaScript 来计算字体大小，所以你需要在页面中引入一个 JavaScript 文件。