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 id="Flexible-Boxes">Flexible Boxes</h1>
<div class="flex-container">
<p><strong>Isu Yang Diperhatikan:</strong></p>
<p>Isu hasil yang dijangkakan, yang sepatutnya memotong teks kepada "ThisIsASam...", tidak tercapai. Sebaliknya, output memaparkan "ThisIsASamp ".</p>
<p><strong>Punca:</strong></p>
<p>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.</p>
<p><strong>Penyelesaian:</strong></p>
<p>Untuk menyelesaikan masalah ini, kelas berasingan harus digunakan untuk kanak-kanak mengawal pemotongan.</p>
<p><strong>CSS Kod:</strong></p>
<pre class="brush:php;toolbar:false">.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.