Mengapa CSS Saya Tidak `text-overflow: ellipsis;` Berfungsi?

Limpahan teks CSS: elipsis; Tidak Berfungsi?

Sifat CSS "text-overflow: ellipsis;" memotong rentetan apabila panjangnya melebihi ruang yang tersedia, menggantikan bahagian yang dipotong dengan simbol elipsis (...). Walau bagaimanapun, ia mungkin tidak sentiasa berfungsi seperti yang diharapkan.

Syarat untuk Kefungsian:

Untuk "limpahan teks: elipsis;" untuk berfungsi dengan betul, syarat berikut mesti dipenuhi:

• Lebar dikekang Pixel: Lebar elemen mesti dinyatakan dalam piksel (px). Lebar dinyatakan sebagai peratusan (%) tidak akan mengaktifkan kesan elipsis.
• Limpahan Terkekang dan Ruang Putih: Elemen mesti mempunyai kedua-dua "overflow: hidden" dan "white-space: nowrap " set.

Membetulkan Isu:

Dalam kod yang disediakan, isu timbul kerana lebar elemen "a" tidak dikekang. Walaupun lebar ditakrifkan, elemen ditetapkan kepada "paparan: sebaris" secara lalai, yang membolehkannya mengembang melebihi lebar yang ditentukan.

Untuk menyelesaikan masalah ini, anda mesti mengekang lebar elemen menggunakan salah satu daripada yang berikut kaedah:

• Tetapkan Paparan: Tukar sifat paparan kepada "display: inline-block" atau "paparan: blok" untuk menghalang elemen daripada mengembang melebihi lebar yang ditentukan.
• Elemen Kontena Kekangan: Tentukan "paparan: blok" dan lebar tetap atau lebar maksimum untuk salah satu elemen bekas elemen "a".
• Apungkan Elemen: Guna "float: left" atau "float: right" ke elemen "a" untuk mengehadkan lebarnya.

Penyelesaian yang disyorkan ialah untuk menetapkan sifat paparan kepada "display: inline-block," sebagai ia meminimumkan potensi kesan pada reka letak semasa.

Snippet Semakan:

.app a {
  height: 18px;
  width: 140px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0 5px 0 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}

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