Bagaimanakah Saya Boleh Mencapai Elipsis Jajaran Kiri dalam Limpahan Teks Menggunakan CSS?

Kawalan Elipsis Teks Jajaran Kiri

Dalam kes apabila teks melimpah dalam bekas, gelagat biasa ialah elipsis muncul pada betul, memotong teks dari hujung. Walau bagaimanapun, dalam senario tertentu, elipsis di sebelah kiri mungkin diingini, memastikan maklumat penting kekal kelihatan.

Satu pendekatan untuk mencapai elipsis dijajar kiri adalah melalui CSS. Coretan kod berikut menggunakan sifat arah, penjajaran teks dan limpahan teks:

p {
  white-space: nowrap;
  overflow: hidden;
  /* "overflow" value must be different from "visible" */
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

Dalam penyelesaian ini, sifat ruang putih menghalang teks daripada dibalut, manakala sifat limpahan menetapkan gelagat limpahan untuk disembunyikan, memastikan bahawa kandungan dipotong apabila ia melebihi lebar bekas. Sifat limpahan teks secara eksplisit menyatakan penggunaan elipsis untuk pemangkasan.

Sifat lebar menentukan ruang maksimum yang tersedia untuk teks. Sifat arah menetapkan arah teks ke kanan ke kiri (rtl), dan sifat penjajaran teks menetapkan penjajaran teks ke kiri. Gabungan sifat ini membolehkan elipsis muncul di hujung kiri teks apabila ia dipotong.

Walaupun pendekatan CSS sahaja ini menyediakan penyelesaian dalam Firefox dan Chrome, ia mungkin menghadapi had apabila berurusan dengan RTL campuran dan kandungan LTR. Nilai jenis limpahan kiri yang ditentukan kekal sebagai percubaan dan mungkin memerlukan pembangunan lanjut untuk menyediakan gelagat yang diingini merentas pelbagai senario.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Elipsis Jajaran Kiri dalam Limpahan Teks Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!