Bagaimanakah JavaScript Boleh Menggayakan Baris Teks Khusus dalam Perenggan dengan Tepat, Mengatasi Had CSS?

Memilih Baris Teks Tertentu dengan CSS dan JS

Menggayakan baris teks tertentu boleh menjadi mencabar, terutamanya apabila unsur pseudo CSS seperti : baris pertama terhad kepada baris pertama. Artikel ini meneroka penyelesaian JavaScript yang menangani had ini.

Satu kes penggunaan penyelesaian ini adalah untuk menyerlahkan setiap baris genap perenggan untuk kebolehbacaan yang dipertingkatkan. Pra-format teks dengan membalut setiap baris dalam rentang dengan kelas yang unik membolehkan penggayaan disasarkan. Walau bagaimanapun, menentukan tempat untuk memisahkan teks boleh menjadi rumit, terutamanya dengan lebar perenggan berubah-ubah.

JavaScript menawarkan penyelesaian praktikal untuk cabaran ini. Kod yang disediakan membalut setiap perkataan dalam elemen span dan menetapkan kelas berdasarkan kedudukan span semasa saiz semula tetingkap. Kiraan garisan ditambah apabila kedudukan menegak span berubah dan kelas yang sepadan ('garis' diikuti dengan nombor baris) diberikan kepada span.

Menggunakan pendekatan ini, diskriminasi garis genap/ganjil menjadi mudah. tugasan. Untuk kecekapan yang lebih baik, kod itu boleh dioptimumkan lagi. Walau bagaimanapun, pelaksanaan yang disediakan berfungsi sebagai bukti asas konsep.

Kes tepi harus dipertimbangkan, seperti di mana gaya kelas mengubah saiz atau lebar perkataan, kerana ini boleh menyebabkan pemisahan baris yang tidak tepat.

Tunjuk cara penyelesaian ini boleh didapati di https://jsbin.com/piwizateni/1/edit?html,css,js,output, mempamerkan penonjolan terpilih bagi baris bernombor genap sesuatu perenggan.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Boleh Menggayakan Baris Teks Khusus dalam Perenggan dengan Tepat, Mengatasi Had CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!