Memanipulasi tata letak teks | Blog

Header halaman dan bagian adalah salah satu hal pertama pembaca saat melihat halaman web. Seringkali ditata untuk menjadi lebih besar, lebih berani, dan berbeda secara visual dari konten lainnya, mereka membantu kami memproses dan memahami konten yang disajikan.

Karena mereka berada di depan dan tengah, berhati -hati untuk menata cara mereka dengan cara yang menarik secara visual adalah tugas umum yang dilakukan oleh desainer dan pengembang. Jika konten online selalu disajikan dalam ukuran jendela standar, mencegah teks membungkus dengan cara yang tidak diinginkan akan mudah. Namun, kenyataannya adalah bahwa kita perlu membuat konten kita bekerja untuk ukuran viewport yang hampir tak terbatas.

Telah mencapai Kemampuan Baseline Pada bulan Maret 2024, kita sekarang dapat menggunakan text-wrap properti untuk mempengaruhi bagaimana teks kami diterapkan.

text-wrap: wrap

Secara default, text-wrap Properti memiliki nilai wrap yang dioptimalkan untuk sesedikit mungkin luapan. Dari sudut pandang praktis, agen pengguna memberikan kata sebanyak mungkin pada setiap baris sebelum pindah ke yang berikutnya seperti yang terlihat pada Gambar 1.

Karena text-wrap: wrap dioptimalkan untuk efisiensi, itu tidak mempertimbangkan panjang paragraf yang dapat mengarah anak yatim. Karena anak yatim dapat mengurangi keterbacaan blok teks yang besar, dan dalam konteks header bisa tidak sedap dipandang, diinginkan untuk mencoba dan menghindarinya.

Mari kita lihat nilai yang berbeda yang dapat ditetapkan text-wrap Untuk melihat bagaimana mereka mengubah bagaimana teks kita ditampilkan.

text-wrap: nowrap

Jika kita mengubah text-wrap nilai properti diterapkan pada paragraf dari nilai defaultnya wrap ke nilai nowrapKita dapat mencegah garis membungkus sama sekali. Pada Gambar 2, kita melihat paragraf sekarang tetap di garis masing -masing dan meluap wadahnya yang diuraikan menggunakan titik -titik kuning.

Meskipun tidak bermanfaat untuk kasus penggunaan kami saat ini, mencegah elemen -elemen tertentu dari pembungkus dapat berguna ketika hanya menunjukkan sebagian kecil dari teks dengan beberapa cara lain untuk mengakses konten lengkap seperti di panel yang dapat diperluas.

Dalam Listing 1, kami menggunakan text-wrap: nowrap bersamaan dengan overflow Dan text-overflow Properti untuk menyembunyikan teks yang meluap, tambahkan elips di ujung garis untuk menunjukkan bahwa ada lebih banyak teks yang tersedia daripada apa yang ditampilkan, dan mencapai panel yang ditemukan pada Gambar 3.

section.closed p {
  text-wrap: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Kembali ke tata letak asli kami, kami masih belum membahas masalah yatim piatu kami (Gambar 4).

text-wrap: balance

Salah satu nilai properti yang baru ditambahkan yang dapat kita gunakan untuk mengubah bagaimana teks dicat balance. Sekarang tersedia di semua browser utama (Gambar 5) ia mencoba menyeimbangkan jumlah karakter yang ditemukan di setiap baris.

Saat memberikan paragraf kita ' text-wrap properti nilai balance Dan melihat output di Chrome (Gambar 6), kami melihat sedikit perbedaan dalam paragraf ketiga, tetapi tidak ada yang pertama, yang merupakan orang dengan anak yatim.

Secara relatif, saat melihat hasil kami di Firefox, kami melihat bahwa paragraf pertama kami tidak ada lagi (Gambar 7).

Baik Chrome dan Firefox text-wrap: balance Diimplementasikan, namun mereka berbeda dalam aplikasi mereka. Untuk alasan kinerja, browser membatasi jumlah baris mereka akan menyeimbangkan karakter. Batas Chrome adalah 6 atau kurang garis, sedangkan Firefox adalah 10.

Karena keterbatasan ini, text-wrap: balance tidak akan berfungsi untuk badan teks yang besar dan jauh lebih cocok untuk header atau konten pendek seperti pada ubin contoh yang ditunjukkan pada Gambar 8.

Sejak text-wrap: balance Tidak bekerja dengan baik untuk teks besar, kita perlu mencari solusi yang berbeda untuk konten kita.

text-wrap: pretty

Pilihan yang lebih baik untuk menangani anak yatim dalam tubuh teks besar seperti paragraf kami text-wrap: pretty. Sayangnya properti saat ini (Januari 2025) belum didukung dengan baik (Gambar 9).

Menyukai wrapSaat menggunakan nilai prettyAlgoritma yang digunakan dioptimalkan untuk meminimalkan overflow sehingga menempatkan kata sebanyak mungkin pada garis sebelum pindah ke yang berikutnya. Namun, saat menggunakan pretty Agen pengguna memprioritaskan tata letak di atas kecepatan yang membantu meminimalkan jumlah anak yatim.

Gambar 10 menunjukkan tata letak asli kami di Chrome dengan text-wrap: pretty diterapkan pada paragraf dan paragraf pertama kami akhirnya tidak lagi berakhir dengan kata yatim piatu.

Sekarang Anda tahu cara menggunakan bungkusan teks untuk membuat paragraf dan judul yang lebih estetika, mengurangi anak yatim, dan meningkatkan keterbacaan tanpa mengorbankan tata letak cairan atau responsif.

Happy Coding!