为什么这与 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% 的组合，如the linked demo 所示，在大多数情况下会覆盖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 的部分效果。}

Answer 2

这不是一个完整的答案，而是一个贡献。

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

我不确定，但细胞似乎又给了一次调整的机会。 （可能是this，算法点2）

根据我的实验，仅应用具有固有宽度的替换元素。在这种情况下，文本块具有空白的固有宽度：nowrap。

没有固有宽度的项目在不使用 max-width: 0 的情况下非常适合。

http://jsfiddle.net/rnrlabs/p3dgs19m/

* {
    box-sizing: border-box;
}
.table {
    display: table;
    width: 300px;
}
.row {
    width: 100%;
    display: table-row;
}
.col {
    border: 1px #000 solid;
    display: table-cell;
}
.a {
    min-width: 80px;
}
.x {
    background: #0cf;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}
.y {
    max-width: 0;
}
.z {
    white-space: nowrap;
}

<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x">
            <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidth" />
        </div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y">
            <img src="http://placehold.it/500x50&text=InlineReplacedIntrinsicWidthPlusMaxWidth" />
        </div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x z">Intrinsic Width due white-space property set to nowap.</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y z">Intrinsic Width due white-space property set to nowap and Max-Width</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x"><span>IntrinsicWidthduenospacesintextandblahIntrinsicWidthduenospacesintextandblah</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y"><span>IntrinsicWidthduenospacesintextandMaxWidth</div>
        <div class="col">end</div>
    </div>
</div>
<div class="table">
    <div class="row">
        <div class="col">abc</div>
        <div class="col x y">Non Intrinsic Width. Inline, non-replaced elements. <strong> Inline, non-replaced elements. </strong> Inline, non-replaced elements.</div>
        <div class="col">end</div>
    </div>
</div>

Answer 3

我认为 BoltClock 对 Zach Saucier 的回答的评论 - 行为未定义 - 是避免依赖当今浏览器碰巧表现出所需行为这一事实的一个很好的理由。

很多人（比如我）会提出这个问题，不是因为他们对max-width: 0 在这个案例中的含义有学术兴趣，而是因为他们想知道是否可以使用它破解以在表格单元格中显示省略号以显示文本，FWIW 我认为答案是：“不是真的”。

按照this answer 中的建议，在 的情况下，让省略号起作用的更好方法是在<table> 元素上使用“table-layout: fixed”。