Почему это ведет себя так, как это делается с max-width: 0?

Ответ 1

Примечание: это не только max-width:0, но и любая ширина меньше ширины текстового содержимого.

Смесь display: table-cell, max-width и width:100% создает интересную ситуацию, когда спецификации явно не охватываются. Однако, делая некоторые наблюдения и размышления, мы можем понять, почему у нас одинаковое поведение во всех основных браузерах.

max-width:0 пытается сделать ширину элемента 0, конечно, что означает, что все должно быть переполнено. Однако комбинация display: table-cell и width:100%, как показано в связанной демонстрации, переопределяет эту команду для div (возможно, по той же причине, почему max-width не применяется к строкам таблицы) по большей части. Таким образом, элемент отображает себя так же, как и без max-width:0, пока ширина div не будет достаточно большой, чтобы содержать весь текстовый контент.

Прежде чем мы продолжим, нужно отметить, что сам текст по умолчанию имеет ширину, заданную символами внутри нее. Это своего рода дочерний элемент родительского div, хотя тегов нет.

Эта врожденная ширина текстового содержимого является причиной того, что max-width:0 необходим для создания эффекта. Как только ширина div уже не будет достаточно большой, чтобы содержать все содержимое, свойство max-width:0 позволяет ширине стать меньше ширины текстового содержимого, но заставляет текст, который больше не может стать переполнение самого div. Таким образом, поскольку div теперь имеет переполнение текста и text-overflow: ellipsis установлен, переполнение текста является эллипсом (если это слово).

Это очень полезно для нас, потому что иначе мы не смогли бы сделать этот эффект без большого количества грязного JavaScript. Использовать демо-версию

_{Примечание. Этот ответ описывает поведение и дает некоторое представление о том, почему это так. Он не описывает, как display:table-cell переопределяет часть эффекта max-width.}

Ответ 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>

Ответ 3

Я думаю, что комментарий BoltClock к Zach Saucier отвечает, что поведение undefined - это хорошая причина, чтобы не полагаться на то, что сегодня браузеры проявляют желаемое поведение.

Многие люди (например, я) придут к этому вопросу не потому, что у них есть академический интерес к тому, что max-width: 0 означает в этом случае, а потому, что они хотят знать, правильно ли использовать этот хак для получения многоточия для текста в ячейке таблицы и FWIW. Я думаю, что ответ: "не совсем".

Лучший способ заставить многоточие работать в этом случае - использовать "table-layout: fixed" в элементе <table>, как это предложено в этом ответе.