固定宽度盒子实现文字不换行缩小字体大小

.box {
  width: 200px;
  height: auto;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

解释：

1. 将盒子的宽度设置为固定值，比如200px。
2. 使用flex布局将文本水平垂直居中。
3. 设置文本的'white-space'属性为'nowrap'，表示不换行。
4. 使用'overflow'属性设置文本溢出隐藏。
5. 使用'text-overflow'属性设置文本溢出时显示省略号。
6. 使用'flex-shrink'属性将文本的字体大小自动缩小以适应盒子宽度。

这样，当文本超出盒子宽度时，文本会缩小字体大小，同时显示省略号。