如何避免这种情况并确保文本始终居中显示？

要确保文本始终居中显示，即使内容超过容器宽度，可以采取以下几种方法：

1. **设置最大宽度（max-width）**：结合`overflow-wrap: break-word;`，这将允许文本在必要时换行并在容器内居中。例如：

.container {
   width: 150px;
   height: 50px;
   background-color: yellow;
   overflow-wrap: break-word;
   text-align: center;
   max-width: 100%;
}

2. **使用Flexbox布局**：通过设置`.container`的display为`flex`，并使用`align-items: center;`，可以让内容在垂直方向上居中，同时保持水平居中。示例：

.container {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 150px;
   height: 50px;
   background-color: yellow;
}

3. **使用Grid布局**：同样地，在网格布局中设置`justify-content: center;`和`align-content: center;`也能实现居中效果。

记住，选择哪种方法取决于项目的具体需求和兼容性考虑。