web-dev-qa-db-ja.com

max-width：0の場合と同じように動作するのはなぜですか？

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>
htmlcssoverflowcss-tables
35
Lonimor

注：max-width:0だけでなく、テキストコンテンツの幅よりも小さい幅です。

display: table-cell、max-width、およびwidth:100%が混在していると、仕様で明示的にカバーされていない興味深い状況になります。ただし、いくつかの観察と考察を行うことで、すべての主要なブラウザーで同じ動作をする理由を理解できます。

もちろん、max-width:0は要素の幅を0にしようとします。つまり、すべてがオーバーフローする必要があります。ただし、 リンクされたデモ に見られるように、display: table-cellとwidth:100%の組み合わせは、divのコマンドをオーバーライドします（おそらく同じ理由で- max-widthはテーブル行には適用されません ）ほとんどの場合。そのため、要素は、divの幅がすべてのテキストコンテンツを含むのに十分な大きさでなくなるまで、max-width:0がない場合と同じように表示されます。

続行する前に注意する必要があるのは、テキスト自体の幅はデフォルトで、その中の文字によって設定されることです。タグはありませんが、これは親divの子要素のようなものです。

テキストコンテンツのこの生来の幅が、効果を作成するためにmax-width:0が必要な理由です。 divの幅がすべてのコンテンツを含むのに十分な大きさでなくなると、max-width:0プロパティを使用すると、幅をテキストコンテンツの幅よりも小さくすることができますが、 div自体のオーバーフローになるにはもはや適合しません。したがって、divにテキストオーバーフローがあり、text-overflow: Ellipsisが設定されているため、テキストオーバーフローは省略されます（Wordの場合）。

これは私たちにとって非常に便利です。そうでなければ、多くの厄介なJavaScriptなしではこの効果を生み出すことができなかったからです。 ユースケースデモ

注：この回答は動作を説明し、なぜこれが当てはまるのかについての洞察を提供します。 howdisplay:table-cellがmax-widthの効果の一部をオーバーライドする方法については説明していません。

22
Zach Saucier

これは完全な答えではなく、貢献です。

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
rnrneverdies

Zach Saucierの答えに対するBoltClockのコメント（動作は定義されていない）は、今日のブラウザーがたまたま望ましい動作を示すという事実に依存することを避ける良い理由だと思います。

多くの人（私のような）は、thisの場合にmax-width: 0が何を意味するのかについて学術的な関心を持っているからではなく、彼らは、そのハックを使用して省略記号をテーブルセルのテキストに表示させてもよいかどうかを知りたがっています。そして、FWIWの答えは「実際にはそうではない」だと思います。

省略記号をthatの場合に機能させるためのより良い方法は、table-layout: fixed要素で「<table>」を使用することです。 この回答 で提案されています。

2
Gary McGill