html - 为什么这表现出与max-width:0相同的方式？

参见http://jsfiddle.net/mpx7os95/14/

该行为是所需的行为，它允许3列布局中的中心列占用所有可用空间，并且在缩小足够远时仍允许其中的文本溢出到省略号中。由于max-width: 0，这似乎可行，但是为什么会产生这种效果？

在这种情况下，max-width: 0有何特别之处？

.row {
  width: 100%;
  display: table;
}
.col {
  position: relative;
  min-height: 1px;
  border: 1px #000 solid;
  display: table-cell;
}
.x {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width:100%;
  max-width: 0;
}

<div class="row">
  <div class="col">abc</div>
  <div class="col x">test blah blah blah blah blah zzzzz.</div>
  <div class="col">def</div>
</div>

最佳答案

注意:不只是max-width:0，它的宽度还小于文本内容的宽度。
display: table-cell，max-width和width:100%的混合导致了一个有趣的情况，即规范未明确涵盖。但是，通过进行一些观察和思考，我们可以了解为什么我们在所有主要浏览器中都具有相同的行为。
max-width:0会尝试使元素的宽度为0，这意味着所有内容都应溢出。但是，如the linked demo所示，display: table-cell和width:100%的组合在大多数情况下覆盖了div的命令(可能是出于与 max-width does not apply to table rows相同的原因)。这样，元素将像没有max-width:0一样显示自己，直到div的宽度不再足够大以容纳所有文本内容。

在继续之前要注意的一点是，默认情况下，文本本身的宽度由其内部的字符设置。尽管没有标签，但它是父div的子元素。

文本内容的固有宽度是需要max-width:0来创建效果的原因。一旦div的宽度不再足以容纳所有内容，max-width:0属性将使宽度变得小于文本内容的宽度，但会迫使不再适合的文本变为div的溢出本身。因此，由于div现在具有文本溢出并且已设置text-overflow: ellipsis，因此文本溢出被省略了(如果是一个单词)。

这对我们非常有用，因为否则，如果没有很多凌乱的JavaScript，我们将无法产生这种效果。 Use case demo

注意:此答案描述了行为，并提供了一些有关这种情况的见解。它没有涵盖display:table-cell如何覆盖max-width效果的一部分。

关于html - 为什么这表现出与max-width:0相同的方式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26292408/