Mengapa `text-overflow: ellipsis` Tidak Berfungsi seperti yang Dijangkakan dengan Flexbox?

text-overflow Tidak Berkelakuan dengan Flexbox

Dalam contoh ini, kami mempunyai bekas fleksibel dengan kandungan teks "ThisIsASampleText". Apabila kami menetapkan sifat "display" kepada "flex" dan "text-overflow" kepada "ellipsis", kami menjangkakan teks akan dipotong, tetapi ia tidak berfungsi seperti yang dimaksudkan.

Memeriksa kod, kami dapati bahawa sifat lentur digunakan pada elemen bekas. Walau bagaimanapun, gaya flexbox harus digunakan pada elemen kanak-kanak untuk mempengaruhi reka letak dan sifatnya.

Untuk menyelesaikan isu ini, kami boleh mengalihkan "text-overflow" dan gaya yang berkaitan ke kelas berasingan untuk kanak-kanak flex. Berikut ialah kod yang diubah suai:

.flex-container {<br> paparan: flex;<br> text-align: left;<br>}</p>
<p>.flex-child {<br> ruang putih: nowrap;<br> limpahan: tersembunyi;<br> limpahan teks: elipsis;<br>}</p>
<p><h1>Kotak Fleksibel</h1><br><div> <span class="flex-child">ThisIsASampleText</span><br></div>

Dengan menggunakan gaya pemotongan pada kelas ".flex-child", kita kini potong teks dengan betul kepada "ThisIsASam..." dalam bekas flex. Untuk penjelasan terperinci, rujuk artikel rujukan daripada CSS Tricks yang dipautkan di bawah.

Rujukan: https://css-tricks.com/flexbox-truncated-text/

Atas ialah kandungan terperinci Mengapa `text-overflow: ellipsis` Tidak Berfungsi seperti yang Dijangkakan dengan Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!