Jenis - Jenis Text Effect pada CSS

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 :

    <!-- CSS -->
    <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 : 

    <!-- CSS -->
    <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 : 

    <!-- CSS -->
    <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 : 

    <!-- CSS -->
    <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 :) 

7 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat