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

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

The behavior is the desired behavior, which allows the center column in a 3 column layout to take up all the space available AND still allow the text inside of it to overflow into ellipsis when shrunk far enough. This seems to work due to max-width: 0, but why does it produce this effect?

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

What's so special about max-width: 0 in this case?

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>

3 个解决方案

#1

Note: It's not just max-width:0, it's any width less than the text content's width.

注意：它不仅仅是max-width：0，它的宽度小于文本内容的宽度。

The mixture of display: table-cell, max-width, and width:100% make an interesting situation that the specifications don't explicitly cover. However, by making some observations and thinking, we can understand why we have the same behavior across all major browsers.

显示的混合：table-cell，max-width和width：100％是一个有趣的情况，规范没有明确涵盖。但是，通过一些观察和思考，我们可以理解为什么我们在所有主流浏览器中都有相同的行为。

max-width:0 tries to make the element width 0, of course, meaning that everything should be overflow. However, the combination of display: table-cell and width:100%, as seen in the linked demo, override that command for the div (maybe for the same reason why max-width does not apply to table rows) for the most part. As such, the element displays itself like it would without the max-width:0 until the width of the div is no longer large enough to contain all of the text content.

max-width：0尝试使元素宽度为0，当然，这意味着一切都应该溢出。但是，显示：table-cell和width：100％的组合，如链接演示中所示，覆盖了div的命令（可能出于同样的原因，max-width不适用于表行）大部分。因此，元素显示自己就像没有max-width：0一样，直到div的宽度不再大到足以包含所有文本内容。

A thing to note before we continue is that the text itself by default has a width that is set by the characters inside of it. It's kind of a child element of the parent div, though there are no tags.

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

This innate width of the text content is the reason why max-width:0 is needed to create the effect. Once the width of the div is no longer large enough to contain all of the content, the max-width:0 property enables the width to become less than the width of the text content, but forces the text that can no longer fit to become overflow of the div itself. Thus, since the div now has text overflow and text-overflow: ellipsis is set, the text overflow is ellipsed (if that's a word).

文本内容的这种固有宽度是创建效果需要max-width：0的原因。一旦div的宽度不再大到足以包含所有内容，max-width：0属性使宽度变得小于文本内容的宽度，但强制不再适合的文本变为div本身的溢出。因此，由于div现在有文本溢出和文本溢出：设置省略号，文本溢出是省略的（如果这是一个单词）。

This is very useful to us because otherwise we couldn't make this effect without a lot of messy JavaScript. Use case demo

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

_{Note: This answer describes the behavior and gives some insight as to why this is the case. It doesn't cover how display:table-cell overrides part of the max-width's effect.}

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

#2

This is not to be a complete answer, but a contribution.

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

What's so special about max-width: 0 in this case?

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

I'm not sure, but the cell seems to give another chance to adjust. (maybe this, algorithm point 2)

我不确定，但细胞似乎又给了另一个调整机会。（也许这，算法点2）

According to my experiments applies only replaced elements with intrinsic width. In this case the text block has intrinsic width by white-space: nowrap.

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

Items without intrinsic width fit well without using max-width: 0.

没有固有宽度的项目可以很好地拟合而不使用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>

#3

I think BoltClock's comment on Zach Saucier's answer - that the behaviour is undefined - is a good reason to avoid relying on the fact that today's browsers happen to exhibit the desired behaviour.

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

Many people (like me) will arrive at this question not because they have an academic interest in what max-width: 0 means in this case, but because they want to know whether it's OK to use that hack to get the ellipsis to show for text in a table cell, and FWIW I think the answer is: "not really".

许多人（像我一样）会得出这个问题，不是因为他们对max-width：0意味着什么感兴趣，而是因为他们想知道是否可以使用该hack来获取省略号以显示表格单元格中的文字和FWIW我认为答案是：“不是真的”。

A better way to get the ellipsis to work in that case is to use "table-layout: fixed" on the <table> element, as suggested in this answer.

在这种情况下，让省略号工作的更好方法是在

元素上使用“table-layout：fixed”，如本答案所示。

#1