Editor Downcodes akan menunjukkan kepada Anda cara mencapai efek penyelarasan dua ujung yang mirip dengan Word di CSS! Untuk teks yang dicampur dalam bahasa Mandarin dan Inggris, bagaimana cara membuat teks menjadi lebih indah secara visual dan lebih mudah dibaca? Artikel ini akan menjelaskan secara detail cara menggunakan atribut CSS `text-align: justify;` dan elemen semu `::after` untuk mencapai keselarasan di kedua ujungnya. Artikel ini juga akan melakukan diskusi mendalam tentang penyelarasan baris terakhir dan strategi pengoptimalan, serta dilengkapi dengan jawaban atas pertanyaan umum untuk membantu Anda bersantai.
Untuk mencapai perataan dua ujung dalam CSS yang mirip dengan Word (yaitu, meratakan sisi kiri dan kanan) untuk teks campuran berbahasa Mandarin dan Inggris, langkah-langkah utamanya mencakup penggunaan atribut text-align: justify; setelahnya untuk memaksa akhir teks. Pemrosesan semacam ini tidak hanya membuat teks lebih indah secara visual, tetapi juga meningkatkan keterbacaan teks.
Menggunakan text-align: justify; adalah cara paling langsung. Atribut ini dapat menyelaraskan teks pada kedua ujungnya, tetapi baris terakhir secara default rata kiri, sehingga tidak memenuhi kebutuhan kita. Untuk menyelaraskan baris terakhir di kedua ujungnya, kita dapat menggunakan elemen semu ::after. Dengan menambahkan elemen semu yang tidak terlihat ke wadah teks dan mengatur lebarnya menjadi 100%, Anda dapat memaksa baris teks terakhir untuk diratakan seperti baris lainnya.
Perataan teks merupakan aspek penting dalam desain web, dan CSS menyediakan berbagai properti untuk mengontrol perataan teks. Diantaranya, perataan teks adalah atribut yang paling umum digunakan untuk mencapai perataan teks. Ini mengontrol perataan horizontal teks dalam sebuah elemen. Atribut text-align terutama berisi nilai-nilai berikut:
kiri: Teks rata kiri, ini adalah nilai default. kanan: Teks rata kanan. tengah: Teks berada di tengah. justify: Membenarkan teks pada kedua ujungnya. Dalam skenario ketika bahasa Mandarin dan Inggris dicampur, penggunaan atribut ini dapat membuat sisi kiri dan kanan teks terlihat seragam.Untuk mencapai efek penyelarasan seperti Word di halaman web, teknik utamanya adalah menggunakan text-align: justify; dan kombinasi elemen semu ::after.
Pengaturan dasar
Pertama, atur atribut text-align: justify; Langkah ini membawa teks ke perataan dasar.
.text-justify {
perataan teks: ratakan;
}
Teknik penyelarasan baris terakhir
Untuk mengatasi masalah perataan kiri default pada baris teks terakhir, Anda dapat menggunakan elemen semu ::after. Tambahkan elemen semu ke elemen yang perlu disejajarkan, dan atur lebarnya menjadi 100%. Ini akan memaksa baris teks terakhir disejajarkan di kedua ujungnya, mirip dengan efek di Word.
.text-justify::setelah {
isi: '';
tampilan: blok sebaris;
lebar: 100%;
}
Melalui metode di atas, Anda dapat memperoleh efek menyelaraskan kedua ujung baris terakhir. Namun perlu diperhatikan bahwa karena elemen semu yang ditambahkan menempati ruang tambahan, hal ini dapat menyebabkan beberapa perubahan tata letak, yang perlu disesuaikan dengan situasi tata letak sebenarnya.
Meskipun menggunakan elemen semu ::after pada dasarnya dapat menyelesaikan masalah perataan baris terakhir, dalam beberapa kasus (terutama ketika teksnya lebih sedikit), spasi kata di baris terakhir mungkin terlalu besar dan tidak terlihat indah. Untuk menghindari situasi ini, beberapa metode optimasi dapat diterapkan.
Gunakan atribut text-align-last
CSS menyediakan atribut text-align-last, yang dapat digunakan untuk menentukan cara menyelaraskan baris terakhir atau hanya satu baris teks. Menyetel text-align-last: justify; dapat memiliki efek pengoptimalan, terutama di browser modern yang mendukung atribut ini.
.text-justify {
perataan teks: ratakan;
text-align-last: ratakan;
}
Batasi lebar maksimum
Untuk teks yang lebih pendek, membatasi lebar maksimum wadahnya dengan tepat dapat mengurangi masalah spasi yang berlebihan antar kata di baris terakhir, oleh karena itu, dalam penggunaan sebenarnya, menyesuaikan lebar wadah secara tepat sesuai dengan panjang dan konten juga merupakan pilihan yang baik teks.
Melalui metode dan teknik di atas, Anda dapat mencapai efek perataan teks campuran berbahasa Mandarin dan Inggris di CSS yang mirip dengan Word. Ini tidak hanya meningkatkan estetika halaman, namun juga meningkatkan keterbacaan teks. Dalam aplikasi sebenarnya, ini dapat dipilih dan digunakan secara fleksibel sesuai dengan kebutuhan spesifik dan konten teks.
1. Bagaimana cara mencampur teks dalam CSS dan mendapatkan efek perataan kanan seperti di Word?
Untuk mendapatkan efek pengocokan teks rata kanan di CSS seperti Word, Anda dapat menggunakan atribut text-align. Tempatkan teks yang perlu disejajarkan dalam elemen penampung, lalu tambahkan atribut text-align: justify ke elemen penampung. Hal ini memungkinkan teks di dalam wadah disejajarkan di kedua ujungnya, dan pada saat yang sama mencapai efek perataan kanan. Namun, perlu diperhatikan bahwa metode ini hanya cocok untuk penyelarasan bahasa Inggris atau karakter tunggal, dan mungkin tidak ideal untuk penyusunan huruf bahasa Mandarin.
2. Apakah ada cara lain untuk mencapai susunan campuran bahasa Inggris dan Mandarin di CSS seperti Word, sambil menyelaraskan di sebelah kanan?
Selain menggunakan text-align: justify untuk melakukan pengacakan teks, Anda juga dapat menggunakan atribut float CSS untuk mendapatkan efek seperti yang ada di Word. Bagilah teks yang perlu disejajarkan menjadi beberapa elemen tingkat blok, setiap elemen tingkat blok berisi satu baris teks. Kemudian gunakan float: right untuk mengapungkan elemen tingkat blok ini ke kanan, sehingga setiap blok teks akan disusun dari kanan untuk melengkapi efek perataan kanan. Perlu diperhatikan bahwa saat menerapkan metode ini, Anda perlu memastikan bahwa urutan blok teks adalah dari kanan ke kiri, yaitu dari belakang ke depan.
3. Bagaimana cara memastikan bahwa teks disejajarkan dengan benar di antara baris-baris yang berbeda saat mencampurkan bahasa Mandarin dan Inggris dalam CSS?
Untuk masalah penyelarasan ketika bahasa Mandarin dan Inggris dicampur, Anda dapat menggunakan atribut word-break CSS untuk memastikan bahwa teks disejajarkan dengan benar di antara baris yang berbeda. Dengan menerapkan word-break: break-all ke elemen penampung teks, teks dapat dibungkus di antara kata-kata sesuai kebutuhan, sehingga memecahkan masalah perataan ketika bahasa Mandarin dan Inggris dicampur. Namun perlu diperhatikan bahwa penggunaan word-break: break-all dapat menyebabkan beberapa kata yang panjang terpotong sehingga mempengaruhi pengalaman membaca, sehingga perlu dipertimbangkan.
Saya harap artikel ini dapat membantu Anda lebih memahami dan menerapkan teknik perataan teks CSS. Editor Downcode berharap dapat menjelajahi lebih banyak teknologi front-end bersama Anda!