为什么它的行为与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，当然，这意味着一切都应该溢出。但是，如the linked demo所示，display: table-cell和width:100%的组合覆盖了div的大部分命令（可能与max-width does not apply to table rows相同）。因此，直到div的宽度不再大到足以包含所有文本内容为止，该元素会像没有max-width:0一样显示。

在我们继续之前需要注意的一点是，默认情况下文本本身的宽度由其内部的字符设置。这是父母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。

项目，而不固有宽度合身而不使用最大宽度：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的评论 - 该行为是未定义 - 避免依赖今天的浏览器恰好展现出所需行为的事实是一个很好的理由。

许多人（比如我）会在这个问题到不是因为他们有学术兴趣在什么max-width: 0意味着这种情况，而是因为他们想知道它是否是确定使用该黑客获得省略号显示表格单元格中的文本，以及FWIW我认为答案是：“不是真的”。

一个更好的方式来获得省略号在的工作，情况下是用“table-layout: fixed”的<table>元素，如this answer建议。