Panduan CSS3 hari ini kita akan belajar dan mempelajari Cara Pengaturan Teks HTML Dengan CSS3
Panduan CSS3 hari ini kita akan belajar dan mempelajari Cara Pengaturan Teks HTML Dengan CSS3. CSS3 berisi beberapa fitur tambahan, yang ditambahkan di kemudian hari :
- teks-overflow
- word-wrap
- word-break
Ada berikut paling umum digunakan properti di CSS3
| Values | Deskripsi |
|---|---|
| text-align-last | Digunakan untuk menyelaraskan baris terakhir teks |
| text-emphasis | Digunakan untuk menekankan teks dan warna |
| text-overflow | digunakan untuk menentukan bagaimana meluap konten yang tidak ditampilkan ditandai untuk pengguna |
| word-break | Digunakan untuk memecah baris berdasarkan Kata |
| word-wrap | Digunakan untuk memecah baris dan membungkus ke baris berikutnya |
Text-overflow Dengan CSS3
Properti text-overflow menentukan konten bagaimana overflowed yang tidak ditampilkan ditandai kepada pengguna. contoh sampel overflow teks ditampilkan sebagai berikut :
<html> <head> <style> p.text1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.text2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <b>Original Text:</b> <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> <b>Text overflow:clip:</b> <p class="text1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> <b>Text overflow:ellipsis</b> <p class="text2">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut :
CSS3 Word Breaking
Digunakan untuk memecah baris, kode berikut menunjukkan kode contoh kata breaking
<html> <head> <style> p.text1 { width: 140px; border: 1px solid #000000; word-break: keep-all; } p.text2 { width: 140px; border: 1px solid #000000; word-break: break-all; } </style> </head> <body> <b>line break at hyphens:</b> <p class="text1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> <b>line break at any character</b> <p class="text2">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut :
CSS word wrapping
word wrapping digunakan untuk memecah baris dan bungkus ke line.the berikutnya kode berikut akan memiliki sampel sintaks
p { word-wrap: break-word; }
COMMENTS