Question

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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的原因相同）大部分。因此，元素显示就像没有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/

＆＃13;

* {
    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;
}

＆＃13;

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

＆＃13;

Answer 3

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

很多人（像我一样）会来到这个问题，不是因为他们对这个案件中max-width: 0的含义有学术兴趣，而是因为他们想知道是否可以使用该hack来获取省略号以显示表格单元格中的文本，而FWIW我认为答案是：“不是真的”。

使案例中的省略号工作的更好方法是在table-layout: fixed元素上使用“<table>”，如this answer中所述。

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

3 个答案: