为什么它的行为方式与max-width:0相同？

Question

见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>

Answer 1

注意:它不仅仅是max-width:0,它的宽度小于文本内容的宽度.

的混合物display: table-cell,max-width和width:100%让一个有趣的情况,该规范并没有明确涉及.但是,通过一些观察和思考,我们可以理解为什么我们在所有主流浏览器中都有相同的行为.

max-width:0尝试使元素宽度为0,当然,这意味着一切都应该溢出.但是,在链接演示中看到的display: table-cell和的组合覆盖了大多数情况下的命令(可能出于同样的原因,不适用于表行).因此,元素显示自己就像没有直到宽度不再足以包含所有文本内容一样.width:100%divmax-widthmax-width:0div

在我们继续之前要注意的一点是默认情况下文本本身的宽度由其中的字符设置.div虽然没有标签,但它是父类的子元素.

文本内容的这种固有宽度max-width:0是创建效果所需的原因.一旦宽度div不再足以包含所有内容,该max-width:0属性使宽度变得小于文本内容的宽度,但强制不再适合的文本变为div自身的溢出.因此,由于div现在有文本溢出并被text-overflow: ellipsis设置,文本溢出是省略的(如果这是一个单词).

这对我们非常有用,否则我们无法在没有大量凌乱的JavaScript的情况下实现此效果.用例演示

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