Mengapa `text-overflow` Tidak Berfungsi dengan Flexbox, dan Bagaimana Saya Boleh Membetulkannya?

Mengapa Text Overflow Tidak Berfungsi dengan Paparan Fleksibel?

Dalam CSS, sifat text-overflow digunakan untuk memotong teks apabila melebihi lebar bekasnya yang tersedia. Walau bagaimanapun, apabila digunakan bersama paparan: flex, ia mungkin tidak berfungsi seperti yang diharapkan.

Pertimbangkan kod berikut:

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

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

Dalam contoh ini, bekas-flex ialah bekas flexbox, dan teks dalam div anaknya dijangka akan dipotong. Walau bagaimanapun, anda mungkin menemui hasil berikut:

Output: ThisIsASamp  
Expected: ThisIsASam...

Jika anda mengalih keluar paparan: sifat flex, pemangkasan teks berfungsi seperti yang diharapkan. Jadi, apakah isunya?

Masalahnya terletak pada cara paparan: flex mengagihkan ruang dalam bekas. Tanpa lentur, teks diperah ke dalam lebar yang tersedia dan dipotong dengan sewajarnya. Walau bagaimanapun, apabila flex digunakan, elemen anak (div) menjadi item flex dan mewarisi sifat flexbox bekas.

Untuk menangani perkara ini, anda perlu menggayakan elemen anak secara eksplisit untuk memotong teksnya. Satu cara untuk mencapai ini ialah dengan mencipta kelas berasingan untuk kanak-kanak fleksibel dan menggunakan gaya yang sesuai:

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

Dengan menggunakan gaya ini pada elemen kanak-kanak, anda memastikan ia membungkus teksnya dan memotongnya apabila perlu, walaupun dalam bekas flexbox.

Atas ialah kandungan terperinci Mengapa `text-overflow` Tidak Berfungsi dengan Flexbox, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!