使用text-overflow: ellipsis时文本无法居中的问题求助

解决方法 #

问题根源在于white-space: nowrap会忽略<br>标签，导致两行文本合并为一行，同时text-overflow: ellipsis在单行超长时，会让文本左对齐截断末尾，视觉上偏离居中效果。通过拆分文本行并单独处理每行的溢出逻辑，就能实现溢出时带省略号的文本仍保持居中：

1. 调整HTML结构：将每行文本放入独立容器，确保换行有效。
2. 修改CSS规则：移除父容器的white-space: nowrap，给每个行容器设置溢出省略样式，同时保留父容器的居中对齐。

修改后的代码

HTML：

<div id="alert-message">
  <span class="text-line">thisisextremelylongtext</span>
  <span class="text-line">123 viewers</span>
</div>

CSS：

#alert-message {
  position: absolute;
  width: 960px;
  height: 196px;
  top: 1000px;
  left: 120px;
  padding-top: 44px;
  font-family: 'sequel100black-65uploadedfile' !important;
  text-align: center;
  text-transform: uppercase;
}

.text-line {
  display: block;
  line-height: 142%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

原理说明 #

• 父容器的text-align: center确保每个行容器（display: block的<span>）在容器内居中。
• 每个行容器单独设置white-space: nowrap和text-overflow: ellipsis，当该行文本超长时，会在末尾添加省略号，同时整个行容器保持居中，不会出现左对齐的视觉偏差。

若偏好保留<br>的写法，也可以将每行文本放入<div>标签，CSS规则保持不变，效果一致。

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