Pertanyaan Mengapa ini berperilaku seperti itu dengan max-width: 0?


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

Perilaku adalah perilaku yang diinginkan, yang memungkinkan kolom tengah dalam tata letak 3 kolom untuk mengambil semua ruang yang tersedia DAN masih memungkinkan teks di dalamnya meluap menjadi elipsis ketika menyusut cukup jauh. Ini sepertinya berhasil karena max-width: 0, tapi Mengapa apakah itu menghasilkan efek ini?

Apa yang begitu istimewa max-width: 0 pada kasus ini?

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


32
2017-10-10 05:16


asal


Jawaban:


Catatan: Ini tidak adil max-width:0, lebarnya kurang dari lebar konten teks.

Campuran dari display: table-cell, max-width, dan width:100% buatlah situasi yang menarik yang spesifikasinya tidak secara eksplisit diliput. Namun, dengan membuat beberapa pengamatan dan pemikiran, kita dapat memahami mengapa kita memiliki perilaku yang sama di semua browser utama.

max-width:0 mencoba untuk membuat elemen lebar 0, tentu saja, yang berarti bahwa semuanya harus melimpah. Namun, kombinasi dari display: table-cell dan width:100%, seperti yang terlihat di demo terkait, menimpa perintah itu untuk div (mungkin karena alasan yang sama mengapa max-width tidak berlaku untuk baris tabel) sebagian besar. Dengan demikian, elemen menampilkan dirinya seperti itu akan tanpa max-width:0 sampai lebarnya div tidak lagi cukup besar untuk memuat semua konten teks.

Suatu hal yang perlu diperhatikan sebelum kita lanjutkan adalah teks itu sendiri secara default memiliki lebar yang diatur oleh karakter di dalamnya. Ini semacam elemen anak dari orang tua div, meskipun tidak ada tag.

Lebar bawaan konten teks ini adalah alasannya max-width:0 diperlukan untuk menciptakan efek. Begitu lebar div tidak lagi cukup besar untuk memuat semua konten, max-width:0 properti memungkinkan lebar menjadi kurang dari lebar konten teks, tetapi memaksa teks yang tidak bisa lagi menjadi overflow dari div diri. Jadi, sejak itu div sekarang memiliki luapan teks dan text-overflow: ellipsis diatur, overflow teks bergeser (jika itu kata).

Ini sangat berguna bagi kami karena jika tidak kami tidak dapat membuat efek ini tanpa banyak JavaScript yang berantakan. Gunakan demo huruf

Catatan: Jawaban ini menjelaskan perilaku dan memberikan beberapa wawasan mengenai Mengapa ini adalah kasusnya. Itu tidak mencakup bagaimana  display:table-cell menimpa bagian dari max-widthefek.


17
2017-10-10 06:43



Ini bukan jawaban yang lengkap, tapi kontribusi.

Apa yang istimewa tentang max-width: 0 dalam hal ini?

Saya tidak yakin, tetapi sel tampaknya memberi kesempatan lain untuk menyesuaikan. (mungkin ini, titik algoritma 2)

Menurut eksperimen saya berlaku hanya elemen yang diganti dengan lebar intrinsik. Dalam hal ini blok teks memiliki lebar intrinsik oleh spasi-putih: nowrap.

Item tanpa lebar intrinsik cocok dengan baik tanpa menggunakan lebar maksimal: 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
2017-10-11 05:06



Saya pikir komentar BoltClock pada jawaban Zach Saucier - bahwa perilaku tersebut tidak terdefinisi - adalah alasan yang baik untuk menghindari mengandalkan fakta bahwa browser saat ini terjadi untuk menunjukkan perilaku yang diinginkan.

Banyak orang (seperti saya) akan sampai pada pertanyaan ini bukan karena mereka memiliki minat akademis dalam hal apa max-width: 0 berarti dalam ini kasus, tetapi karena mereka ingin tahu apakah itu OK untuk menggunakan hack itu untuk mendapatkan elipsis untuk ditampilkan untuk teks dalam sel tabel, dan FWIW saya kira jawabannya adalah: "tidak benar-benar".

Cara yang lebih baik untuk membuat elipsis bekerja bahwa case adalah menggunakan "table-layout: fixed"pada <table> elemen, seperti yang disarankan di jawaban ini.


0
2018-05-02 08:40