Bagaimana untuk Mencapai Ellipsis Jajaran Kiri dalam Jejak Breadcrumb dengan CSS?

Elipsis Teks Jajaran Kiri dalam Laluan Breadcrumb

Dalam banyak aplikasi, jejak breadcrumb digunakan untuk memaparkan laluan navigasi hierarki. Apabila laluan menjadi terlalu panjang untuk dipaparkan dengan selesa dalam elemen induknya, limpahan teks: elipsis boleh digunakan untuk memotong teks. Walau bagaimanapun, pemangkasan ini biasanya berlaku di sebelah kanan rentetan, yang berpotensi mengaburkan maklumat penting.

Penyelesaian CSS Sahaja

Untuk mencapai elipsis sejajar kiri, sifat CSS seperti arah, penjajaran teks dan limpahan teks boleh digunakan. Sebagai contoh, pertimbangkan coretan berikut (diadaptasi daripada jsFiddle yang disediakan):

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

Cara Ia Berfungsi

• white-space: nowrap; menghalang ruang putih daripada membalut teks, memastikan bahawa denai kekal pada satu baris.
• limpahan: tersembunyi; menyembunyikan sebarang teks limpahan, termasuk elipsis.
• limpahan teks: elipsis; memotong teks dan menambah elipsis pada penghujungnya.
• lebar: 170px; menetapkan lebar maksimum denai.
• arah: rtl; memaksa teks untuk dipaparkan dari kanan ke kiri (arah terbalik).
• text-align: kiri; menjajarkan teks ke kiri dalam lebar yang diberikan.

JS Solution (tidak tersedia dalam jawapan yang disediakan)

Walaupun tidak diminta secara eksplisit, penyelesaian JS boleh memberikan fleksibiliti tambahan, terutamanya dalam mengendalikan kandungan RTL dan LTR campuran. Satu pendekatan ialah menggunakan sifat mod text-overflow, walaupun dengan kaveat dan pengehadan tertentu:

document.querySelectorAll("p").forEach((p) => {
  p.style.textOverflowMode = "clip";
  p.style.direction = "rtl";
  p.style.textAlign = "left";
});

Pertimbangan

Sementara pendekatan ini menangani isu khusus yang digariskan dalam soalan, adalah penting untuk mengambil perhatian potensi kelemahan:

• Bukan semua penyemak imbas menyokong sepenuhnya sifat text-overflow-mode.
• Sesetengah penyemak imbas mungkin mempamerkan keanehan pemaparan, terutamanya apabila mencampurkan kandungan RTL dan LTR.

Walaupun pengehadan ini, penyelesaian yang disediakan menawarkan praktikal cara untuk menangani cabaran elipsis sejajar kiri dalam denai serbuk roti, memastikan maklumat penting kekal boleh diakses.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Ellipsis Jajaran Kiri dalam Jejak Breadcrumb dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!