Membuat Ulang Efek Teks Terpotong MDN

Bukan rahasia lagi bahwa MDN meluncurkan desain baru kembali pada bulan Maret. Ini indah! Dan ada beberapa permata CSS-y manis di dalamnya yang menyenangkan untuk dilihat. Salah satu permata itu adalah bagaimana komponen kartu menangani teks yang terpotong.

Cukup keren, ya? Saya ingin merobeknya sedikit, tetapi beberapa hal benar-benar menarik saya ke dalam pendekatan ini:

• Ini adalah contoh sengaja memotong konten. Kami menyebutnya sebagai kehilangan data CSS di tempat lain. Dan sementara kehilangan data umumnya merupakan hal yang buruk, saya suka bagaimana itu digunakan di sini karena kutipan dimaksudkan untuk menjadi penggoda untuk konten lengkap.
• Ini berbeda dengan memotong teks dengan text-overflow: ellipsis, topik yang muncul baru-baru ini ketika Eric Eggert berbagi kekhawatirannya dengan itu. Argumen utama yang menentangnya adalah bahwa tidak ada cara untuk memulihkan teks yang terpotong dalam pemotongan — teknologi bantu akan mengumumkannya, tetapi pengguna yang terlihat tidak memiliki cara untuk memulihkannya. Pendekatan MDN memberikan sedikit lebih banyak kontrol di departemen itu karena pemotongannya hanya visual.

Jadi, bagaimana MDN melakukannya? Tidak ada yang terlalu mewah di sini sejauh HTML berjalan, hanya sebuah wadah dengan paragraf.

<div class="card">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore consectetur temporibus quae aliquam nobis nam accusantium, minima quam iste magnam autem neque laborum nulla esse cupiditate modi impedit sapiente vero?</p>
</div>

Kita bisa memasukkan beberapa gaya dasar untuk menopang segalanya.

Sekali lagi, tidak ada yang terlalu mewah. Tujuan kami adalah memotong konten setelah, katakanlah, baris ketiga. Kita dapat mengatur max-height pada paragraf dan sembunyikan luapan untuk itu:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
}

Whoa whoa, ada apa dengan itu calc() hal-hal? Perhatikan bahwa saya mengatur --base variabel di muka yang dapat digunakan sebagai pengganda umum. Saya menggunakannya untuk menghitung font-size, line-height, padding untuk kartunya, dan sekarang max-height dari paragraf. Saya merasa lebih mudah untuk bekerja dengan nilai konstan terutama ketika ukuran yang saya butuhkan benar-benar didasarkan pada skala seperti ini. Saya perhatikan MDN menggunakan yang serupa --base-line-height variabel, mungkin untuk tujuan yang sama.

Membuat baris teks ketiga memudar? Ini klasik linear-gradient() pada paragraf :after pseudo-element, yang disematkan ke sudut kanan bawah kartu. Jadi, kita dapat mengaturnya:

.card p:after {
  content: ""; /* Needed to render the pseudo */
  background-image: linear-gradient(to right, transparent, var(--background) 80%);
  position: absolute;
  inset-inline-end: 0; /* Logical property equivalent to `right: 0` */
}

Perhatikan saya menelepon a --background variabel yang disetel ke nilai warna latar belakang yang sama yang digunakan pada .card diri. Dengan begitu, teks tampak memudar ke latar belakang. Dan saya menemukan bahwa saya perlu mengubah penghentian warna kedua di gradien karena teks tidak sepenuhnya tersembunyi ketika gradien menyatu hingga 100%. saya menemukan 80% menjadi sweet spot bagi mataku.

Dan ya, :after membutuhkan a height dan width. itu height di mana itu --base variabel kembali berperan karena kami ingin itu diskalakan ke paragraf line-height untuk menutupi teks dengan ketinggian :after.

.card p:after {
  /* same as before */
  height: calc(1rem * var(--base) + 1px);
  width: 100%; /* relative to the .card container */
}

Menambahkan satu piksel tinggi ekstra tampaknya berhasil, tetapi MDN dapat melakukannya tanpa itu ketika saya mengintip DevTools. Kemudian lagi, saya tidak menggunakan top (Atau inset-block-start) untuk mengimbangi gradien ke arah itu. ️

Sekarang p:after benar-benar diposisikan, kita perlu secara eksplisit mendeklarasikan posisi relatif pada paragraf untuk disimpan :after dalam alirannya. Jika tidak, :after akan benar-benar ditarik dari aliran dokumen dan berakhir di luar kartu. Ini menjadi CSS lengkap untuk .card gugus kalimat:

.card p {
  max-height: calc(4rem * var(--base)); /* Set a cut-off point for the content */
  overflow: hidden; /* Cut off the content */
  position: relative; /* needed for :after */
}

Kita sudah selesai, kan? Tidak! Gradien dang sepertinya tidak berada di posisi yang tepat.

Saya akui saya kentut dalam hal ini dan menyalakan DevTools di MDN untuk melihat apa yang saya lewatkan. Oh ya, :after perlu ditampilkan sebagai elemen blok. Jelas seperti hari ketika menambahkan batas merah padanya.🤦‍♂️

.card p:after {
  content: "";
  background: linear-gradient(to right, transparent, var(--background) 80%);
  display: block;
  height: calc(1rem * var(--base) + 1px);
  inset-block-end: 0;
  position: absolute;
  width: 100%;
}

Semua bersama Sekarang!

Dan, ya, terlihat terdengar seperti VoiceOver menghormati teks lengkap. Saya belum menguji pembaca layar lainnya.

Saya juga memperhatikan bahwa implementasi MDN dihapus pointer-events dari p:after. Mungkin taktik defensif yang baik untuk mencegah perilaku aneh saat memilih teks. Saya menambahkannya dan memilih teks terasa sedikit lebih halus, setidaknya di Safari, Firefox, dan Chrome.