为什么文本换行时表格单元格中有额外的空格？

Question

我有一个水平居中的div有两个孩子。每个孩子都使用display: table-cell和vertical-align:middle

垂直居中

当屏幕（或父容器）足够宽以使所有文本在一行上时，一切正常。但是，如果屏幕/父级收缩，则文本会换行并留下大量空白区域。为什么div不缩小以适应文本？

下图显示了问题。一切都是我想要它在顶部图像中的方式。灰色部分包装内容，并在其父容器中居中。但是，如果父级缩小以使文本换行，则会留下一堆空白区域（请参阅红色矩形中突出显示的区域）。这个空白会产生一种错觉，即整个元素是左对齐而不是居中。

我到目前为止的一个jsFiddle示例是：http://jsfiddle.net/eterpstra/pRgeL/1/

任何方法摆脱这个空白，所以一切都显示更多居中，而不是向左移动？

Answer 1

正如@andi所写，浏览器以奇怪的方式进行表格布局。这可以使用HTML中的单个单元格表来演示：

<div style="width: 270px; background: yellow">
<table>
<tr><td style="font-size: 25px; border: solid 1px">Way too much white space
</table>
</div>

浏览器首先尝试将所有文​​本设置在同一行，分配可用宽度（此处为270px），然后找出文本需要包装，但是忘记根据文本的长度调整单元格宽度内容中最长的一行。

在内容中放置一个<br>标记（在该行将被破坏的位置）将“修复”这一点，但使用固定换行符的设计很差，非常不灵活方式。

似乎可以通过在单元格内使用内部span元素并将单元格的style.width属性设置为等于offsetWidth span属性来修复此问题。 } element，附加单位px：

<div style="width: 270px; background: yellow">
<table>
<tr><td id=cell style="font-size: 25px; border: solid 1px"><span id=t>Way too much white
  space</span>
</table>
</div>
<script>
 document.getElementById('cell').style.width = 
   document.getElementById('t').offsetWidth + 'px';
</script>

jsfiddle

对于一般解决方案，我认为您可以 - 而不是像上面那样的特定编码 - 编写遍历可能需要修复的td元素（或带有display: table-cell的元素）的脚本，插入动态地span元素，然后执行修复。这样的事情，假设您的表格单元格都是td元素，并且具有可以安全地包含在span元素中的内容：

<script>
var cells = document.getElementsByTagName('td');
for(var i = 0; i < cells.length; i++) {
  var cell = cells[i];
  var span = document.createElement('span');
  span.innerHTML = cell.innerHTML;
  cell.innerHTML = span.outerHTML;
}
for(var i = 0; i < cells.length; i++) {
  var cell = cells[i];
  cell.style.width = cell.childNodes[0].offsetWidth + 'px';
}
</script>

Answer 2

看起来浏览器增加了灰色部分（.header-wrap）的宽度，直到它是.header（你在CSS中设置）的宽度的100％。如果.header-wrap中的文本仍然太长，它将会换行，但.header-wrap的宽度将保持在整个宽度而不是缩小到适合。我认为这是有道理的。

我说你最好的选择是使用text-align: center;而不必担心多余的空白区域。在这种情况下，我认为你无能为力。