Bagaimana untuk Mencapai Elipsis Limpahan Teks Sebelah Kiri dalam Safari?

Elipsis Limpahan Teks Sebelah Kiri

Apabila bekerja dengan senarai laluan yang panjang, mungkin sukar untuk memaparkannya sepenuhnya sambil memastikan bahawa maklumat penting di sebelah kanan kekal kelihatan. Untuk menangani perkara ini, anda mungkin ingin melaksanakan elipsis limpahan teks sebelah kiri, yang akan memotong permulaan laluan sambil mengekalkan penghujungnya.

Tidak seperti penyemak imbas seperti Firefox dan Chrome, Safari pada masa ini tidak mempunyai sokongan untuk fungsi ini menggunakan CSS sahaja. Walau bagaimanapun, gabungan sifat CSS boleh digunakan sebagai penyelesaian.

Penyelesaian CSS:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 170px;
  border: 1px solid #999;
  direction: rtl;
  text-align: left;
}

Penjelasan:

• ruang putih: nowrap menghalang teks daripada dibalut pada berbilang baris.
• limpahan: tersembunyi menyembunyikan bahagian teks yang melimpah.
• limpahan teks: elipsis mencetus penambahan elipsis apabila teks melebihi lebar yang tersedia.
• lebar menentukan lebar maksimum bekas laluan.
• arah: rtl memaksa arah teks ke kanan ke kiri.
• text-align: kiri menjajarkan teks ke kiri bekas, dengan berkesan meletakkan elipsis di sebelah kiri.

Contoh:

<p>first > second > third<br />
second > third > fourth > fifth > sixth<br />
fifth > sixth > seventh > eighth > ninth</p>

Penyelesaian CSS ini mencapai kesan yang diingini untuk memaparkan limpahan teks sebelah kiri elipsis, memastikan maklumat kritikal di sebelah kanan kekal kelihatan, walaupun untuk laluan yang panjang.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Elipsis Limpahan Teks Sebelah Kiri dalam Safari?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!