小容器内文本未正确居中及实现no-wrap效果的技术求助

要实现小容器内文本不换行且水平居中的效果，给容器添加以下CSS属性即可：

.container {
  white-space: nowrap; /* 强制文本保持单行，不自动换行 */
  text-align: center;  /* 让文本在容器内水平居中 */
  /* 可选优化：处理文本超出容器的情况 */
  overflow: hidden;
  text-overflow: ellipsis;
}

属性说明 #

• white-space: nowrap：核心属性，阻止文本换行，确保内容始终在一行显示
• text-align: center：实现文本相对于容器的水平居中对齐
• overflow: hidden + text-overflow: ellipsis：当文本长度超过容器宽度时，隐藏溢出部分并显示省略号，避免破坏布局美观

完整可运行示例 #

<!-- 小容器示例 -->
<div class="small-container">需要居中且不换行的文本内容</div>

<style>
.small-container {
  width: 180px; /* 自定义容器宽度 */
  padding: 8px;
  border: 1px solid #ddd;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

内容的提问来源于stack exchange，提问作者Adam