Mengapa Teks Limpahan: Elipsis Gagal dalam Bekas Flexbox?

Elipsis Truncation Gagal dalam Bekas Flexbox

Apabila menggunakan paparan: flex, sifat limpahan teks mungkin terhenti berfungsi seperti yang dimaksudkan. Isu ini timbul disebabkan penggayaan ibu bapa-anak, di mana sifat pemotongan mesti digunakan pada elemen anak individu, bukan bekas.

Mari kita pertimbangkan kod yang disediakan:

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

<h1>Flexible Boxes</h1>
<div>

Dalam senario ini, gaya digunakan pada elemen induk .flex-container, yang tidak memegang kandungan. Untuk menyelesaikan masalah ini, kita perlu mencipta kelas berasingan untuk elemen anak:

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

Dengan cara ini, sifat pemangkasan digunakan terus pada kandungan, memastikan kefungsian yang betul dalam bekas flexbox.

Untuk penjelasan dan sumber terperinci, rujuk: https://css-tricks.com/flexbox-truncated-text/

Atas ialah kandungan terperinci Mengapa Teks Limpahan: Elipsis Gagal dalam Bekas Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!