Mengapa `text-overflow: ellipsis` Tidak Berfungsi dalam Bekas Flex?

Memangkas Teks dengan limpahan teks dalam Reka Letak Flex

Melaksanakan limpahan teks: elipsis untuk memotong teks dalam bekas fleksibel selalunya membawa kepada elipsis tidak hadir. Ini menjadi jelas apabila membandingkan hasil dengan kod yang sama tanpa flexbox.

Kod CSS:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

Kod HTML:

<h1>Flexible Boxes</h1>
<div class="flex-container">

Isu Yang Diperhatikan:

Isu hasil yang dijangkakan, yang sepatutnya memotong teks kepada "ThisIsASam...", tidak tercapai. Sebaliknya, output memaparkan "ThisIsASamp ".

Punca:

Isu timbul kerana sifat limpahan teks mesti digunakan pada anak flex dan bukannya bekas induk . Ini kerana bekas induk mempunyai satu baris teks, yang tidak memerlukan pemangkasan.

Penyelesaian:

Untuk menyelesaikan masalah ini, kelas berasingan harus digunakan untuk kanak-kanak mengawal pemotongan.

CSS Kod:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Pendekatan ini memastikan kanak-kanak flex mempunyai gaya yang diperlukan untuk memotong teks manakala bekas induk masih boleh mengekalkan reka letak yang diingini.

Atas ialah kandungan terperinci Mengapa `text-overflow: ellipsis` Tidak Berfungsi dalam Bekas Flex?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!