求助：text-overflow:ellipsis搭配text-align:center多浏览器表现不一致问题

这个问题我做项目时也踩过坑，确实是不同浏览器内核的渲染逻辑差异导致的，咱们一步步拆解来看：

问题根源 #

Chrome和Safari基于WebKit/Blink内核，它们对text-align:center和text-overflow:ellipsis的处理逻辑是先居中原始文本，当文本溢出时直接在容器右侧追加省略号——也就是说省略号并没有参与居中计算，只是“贴”在容器边缘，所以看起来只有文本居中，省略号位置不对。

而Firefox的Gecko内核则是把截断后包含省略号的整个文本块当成一个整体来应用居中对齐，所以视觉上是完整的居中效果，这也是你想要的期望表现。

统一跨浏览器效果的解决方案 #

想要让Chrome/Safari也实现Firefox的居中效果，最稳妥的方法是用嵌套容器来分离居中逻辑和省略号逻辑，具体代码如下：

HTML结构 #

<div class="textblock">
  <div class="textblock-inner">这里是需要截断的超长文本内容，测试测试测试测试测试测试测试测试</div>
</div>

CSS样式 #

.textblock {
  text-align: center;
  position: absolute;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

.textblock-inner {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1em;
  font-weight: normal;
}

原理说明 #

外层容器textblock负责整体居中，内层textblock-inner设置为inline-block后，会被外层的text-align:center居中对齐；同时内层自己处理文本截断和省略号，这样不管哪个浏览器，都会把带省略号的整个文本块当成一个居中单元，最终效果就和Firefox一致了。

如果你不想增加DOM层级，也可以用flex布局替代，把外层容器设置为display:flex; justify-content:center;，内层同样处理省略号，效果是一样的。

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