Jenis - Jenis Text Effect pada CSS
07/10/2019 Risman Hakim 1187 Website
Jenis - jenis Text Effect pada CSS - Text Effect pada CSS memiliki jenis - jenis yang berbeda untuk bisa kita gunakan dalam mengatur teks, pada text effect terdapat 4 jenis properti yaitu : text-overflow, word-wrap, word-break, writing-mode. Masing - masing dari properti tentu memiliki fungsi yang berbeda, berikut akan saya bahas satu persatu dari properti diatas dan cara penggunaan nya.
1. Text Overflow
Properti text-overflow merupakan properti yang dapat kita manfaatkan untuk menyembunyikan atau memotong konten, misalnya kita mempunyai satu paragraf yang panjang kemudian kita ingin memotong atau menyembunyikan sebagian teksnya. Dengan properti text-overflow kita bisa melakukan pengaturan teks agar bisa disembunyikan atau dipotong. Berikut adalah contoh penggunaan text-overflow :
<style>
.paragraf-1 {
background:darkcyan;
color: white;
border:1px solid #333333;
padding:5px;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
.paragraf-2 {
background:darkcyan;
color: white;
border:1px solid #333333;
padding:5px;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
<!-- HTML -->
<p class="paragraf-1">DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi.</p>
<p class="paragraf-2">DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi.</p>
2. Word Wrap
Properti word-wrap dapat kita manfaatkan untuk memangkas kalimat panjang pada teks, misalnya ada teks dengan satu kaliamt panjang ingin di pangkas, maka gunakan word-wrap. Berikut adalah contoh penggunaan word-wrap :
<style>
.paragraf-1 {
width: 200px;
padding: 5px;
background: darkcyan;
color: white;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
<!-- HTML -->
<p class="paragraf-1">DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusaaaaaaaaaaaaaaaaaanlebihdariiiiiiiii 8000 orang dari berbagai status dan profesi.</p>
3. Word Break
Properti word-break dapat dimanfaatkan untuk mengatur teks pada paragraf agar bisa dipangkas, hampir mirip dengan word-wrap hanya saja pada word-break kaliamt pada paragraf akan dipangkas walaupun tidak terdapat kalimat yang panjang. Berikut adalah contoh penggunaan word-break :
<style>
.paragraf-1 {
width: 150px;
padding: 5px;
background: darkcyan;
color: white;
border: 1px solid #000000;
word-break: keep-all;
}
.paragraf-2 {
width: 150px;
padding: 5px;
background: darkcyan;
color: white;
border: 1px solid #000000;
word-break: break-all;
}
</style>
<!-- HTML -->
<p class="paragraf-1">DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi</p>
<p class="paragraf-2">DUMET School adalah lembaga kursus yang bergerak di bidang pendidikan khususnya kursus website, digital marketing, dan desain grafis. Sampai saat ini DUMET School sudah memiliki lulusan lebih dari 8000 orang dari berbagai status dan profesi</p>
4. Writing Mode
Properti writing-mode bisa digunakan untuk mengatur apakah teks akan diletakan secara horizontal atau secara vertikal. Berikut adalah contoh penggunaan writing-mode :
<style>
.paragraf-1 {
padding: 5px;
background: darkcyan;
color: white;
border: 1px solid #000000;
writing-mode: vertical-rl;
}
</style>
<!-- HTML -->
<p class="paragraf-1">DUMET School adalah lembaga kursus terbaik dijakarta.</p>
Baiklah, itu semua Jenis - jenis Text Effect pada CSS yang bisa kita manfaatkan untuk mengatur teks, cukup sekian pembahasan kali ini, semoga bermanfaat dan sampai jumpa di artikel selanjutnya :)
No data.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
