14 Properti CSS untuk Memformat Teks atau Kalimat pada Halaman Web

Memformat kalimat atau paragraf yang akan ditamplkan pada halaman web sangat diperlukan agar pengunjung dapat dengan mudah memahami isi dari paragraf tersebut. Jangan sampai suatu paragraf yang berisi informasi menarik jadi susah untuk dibaca karena pemilihan format teks yang kurang tepat.

Pada Artikel ini Anda akan mengetahui cara memformat Teks yang tepat dengan menggunakan properti-properti khusus yang dimiliki oleh CSS. berikut ulasan selengkapnya.

Daftar isi

1. color

Properti color pada CSS merupakan properti yang berfungsi untuk menentukan warna pada teks atau kalimat. Artinya, properti tersebut bisa Anda gunakan untuk memberikan warna tertentu pada teks, kata, kalimat. Anda bisa mengkombinasikan warna teks dengan background agar lebih mudah untuk dibaca.

Value atau Nilai yang digunakan untuk properti color antara lain : color, Hex, rgb, rgba, hsl, hsla. dan berikut keterangan dari beberapa value tersebut.

Daftar Tabel untuk color
NoJenis ValueDeskripsi
1colornilai dengan menggunakan nama warna misal red, blue, black, yellow, dsb
2HEXmemberikan nilai dalam bentuk Hexadecimal. contoh #FFFFFF, #328328, #DEDEDE
3rgbNilai RGB atau disebut Red-Green-Blue misal rgb(200,255,0)
4rgbaNilai RGBA atau disebut Red-Green-Blue-Alpha misal rgba(102,51,0,1)
5hslNilai HSL atau disebut Hue-Saturation-Lightness misal hsl(360,100%,50%)
6hslaNilai HSLA atau disebut Hue-Saturation-Lightness-Alpha misal hsla(360,100%,50%,0.1)

dibawah ini adalah contoh beberapa kalimat yang diberi warna dengan properti color dengan ketentuan : kalimat pertama berwarna merah dengan nilai nama warna yaitu 'red', kalimat kedua berwarna hijau dengan nilai RGB(0,255,0), dan kalimat ketiga berwarna Biru dengan nilai HSL(240, 100%, 50%).

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> membuat warna dengan properti color </title>
        <style>
            .hex{
                color: red;
            }
            .rgb{
                color: rgb(0,255,0);
            }
            .hsl{
                color: hsl(240,100%,50%);
            }
        </style>
    </head>
    
    <body>
        <div class="hex"> Huruf pada Kalimat ini Akan Berwarna Merah </div>
        <div class="rgb"> Sedangkan pada Kalimat kedua ini Akan Berwarna Hijau </div>
        <div class="hsl"> dan Kalimat yang Terakhir ini Akan Berwarna Biru </div>
    </body>
    
</html>

dibawah ini adalah screenshot hasil dari kode diatas jika dijalankan pada web browser.

contoh hasil penggunaan dari properti color pada css
Gambar 1

2. Direction

Properti direction pada CSS merupakan properti yang digunakan untuk menentukan arah penulisan teks atau kalimat. Efek dari properti direction tersebut membuat sebuah kalimat atau teks menjadi rata kanan atau kiri(mirip text-align). dibawah ini contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti direction </title>
        <style>
            .ltr{
                direction: ltr;
                color: red;
            }
            .rtl{
                direction: rtl;
                color: green;
            }
            .initial{
                direction: initial;
                color: blue;
            }
        </style>
    </head>
    
    <body>
        <p class="ltr"> Kalimat ini Akan diatur dengan nilai LTR </p>
        <p class="rtl"> Kalimat ini Akan diatur dengan nilai RTL </p>
        <p class="initial"> Kalimat ini Akan diatur dengan nilai initial </p>
    </body>
    
</html>

direction memiliki 2 value utama yaitu Ltr(left-to-right) dan Rtl(right-to-left). Anda juga bisa menggunakan Nilai seperti initial dan inherit, dimana initial mengembalikan nilai properti ke default-nya sedangangkan inherit membuat nilai properti mengikuti induknya(parent element).

Properti direction penggunaanya disarankan bersamaan dengan properti unicode-bidi. dan dibawah ini adalah screenshot hasil dari kode diatas jika dijalankan pada web browser.

contoh hasil penggunaan dari properti direction pada css
Gambar 2

3. Letter-Spacing

letter-spacing merupakan properti CSS yang dibuat khusus untuk memberi spasi antara huruf satu dengan lainya pada kalimat. Anda bisa memanfaatkan properti tersebut untuk mengatur jarak antar huruf pada kalimat agar lebih mudah untuk dibaca.

Letter-spacing memiliki value atau Nilai yaitu 'normal' dan ukuran, ukuran yang dimaksud bisa dalam bentuk px, em, pt, pc, cm, dsb misal 10px, 1em, dsb. berikut selengkapnya.

Daftar Tabel untuk Letter-Spacing
NoValueDeskripsi
1normaljarak antar huruf diatur normal atau default
2px, em, pt, cm, etcjarak antar huruf diatur berdasarkan nilai ukuran misal 10px, 1em, 0.5cm, dsb
3initialmengembalikan nilai dari letter-spacing ke defaultnya.
4inheritnilai yang diatur mengikuti induk(parent element)

dibawah ini adalah contoh kode CSS menggunakan properti letter-spacing yang digunakan untuk membuat kalimat pertama diatur dengan nilai normal. sedangkan kalimat kedua jarak antar huruf diatur dengan nilai 5px.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti letter-spacing </title>
        <style>
            .normal{
                letter-spacing: normal;
            }
            .px{
                letter-spacing: 5px;
            }
        </style>
    </head>
    
    <body>
        <p class="normal">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="px">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </body>

</html>

berikut hasil dari kode CSS diatas jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti letter-spacing pada css
Gambar 3

4. Line-Height

line-height dibuat khusus untuk mengatur tinggi baris pada kalimat. Artinya, misalkan Anda menulis kalimat pada word, dan ketika ketik enter ingin pindah baris, nah jarak antara kalimat atas dan bawahnya bisa Anda atur dengan line-height.

properti line-height biasanya digunakan bersamaan dengan properti letter-sapacing untuk mengatur kalimat yang tampil dihalaman web agar lebih mudah untuk dibaca. pengaturan line-height perlu untuk dipahami agar pengunjung yang membaca tidak kesulitan dalam membaca kalimat.

Properti line-height memiliki value atau nilai utama antara lain : normal, angka(misal 1, 1.5, 1.7, dsb), dan ukuran(misal dalam bentuk px, em, dsb). Anda juga bisa menggunakan nilai initial dan inherit. berikut contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti line-height </title>
        <style>
            .px{
                line-height: 10px;
            }
            .normal{
                line-height: normal;
            }
            .angka{
                line-height: 1.9;
            }
        </style>
    </head>
    
    <body>
        <p class="px">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="normal">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="angka">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </body>

</html>

dan berikut screenshot dari hasil contoh kode diatas.

contoh hasil penggunaan dari properti line-height pada css
Gambar 4

5. Text-Align

Text-align merupakan properti CSS yang dibuat khusus untuk mengatur perataan kalimat atau paragraf. Anda bisa menggunakan text-align untuk mengatur paragraf menjadi rata kiri(left), kanan(right), tengah(center), dan justify(rata kanan kiri).

text-align memilik 4 value utama yaitu center, justify, left, dan right. Anda juga bisa menggunakan Nilai initial dan inherit.

text-align Berbeda dengan properti direction dengan kedua Nilai-nya yaitu rtl dan ltr yang penggunaanya hampir sama dengan value milik text-align yaitu left, dan right.

dibawah ini adalah contoh kode CSS dengan menggunakan properti text-align.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti text-align </title>
        <style>
            .kiri{
                text-align: left;
            }
            .kanan{
                text-align: right;
            }
            .tengah{
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <p class="kiri">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="kanan">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="tengah">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </body>

</html>

dan berikut hasil dari kode diatas jika ditampilkan pada halaman web offline.

contoh hasil penggunaan dari properti text-align pada css
Gambar 5

6. Text-Decoration

text-decoration pada CSS dibuat khusus untuk memberikan efek garis pada kata atau kalimat. Artinya, Anda bisa membuat garis bawah, garis atas pada kata tertentu, atau Anda bisa membuat garis ditengah kata(mencoret kata). Bahkan garis tersebut bisa Anda beri warna biar lebih cantik.

Sebenarnya properti text-decoration adalah properti yang mempersingkat penulisan dari ketiga properti lainnya yaitu text-decoration-line, text-decoration-color, text-decoration-style.

ketiga properti tersebut bisa Anda jadikan sebagai Nilai untuk properti text-decoration. berikut ke-3 value untuk text-decoration.

Daftar Tabel untuk Text-Decoration
NoValueDeskripsi
1text-decoration-linemengatur garis yang digunakan menggunakan nilai seperti : none, underline, overline, dan line-through
2text-decoration-colormengatur warna garis dengan nama warna(red, black, dsb), Hex(#fff, #03c, dsb), rgb, hsl, dsb
3text-decoration-stylemengatur gaya garis yang dibuat dengan nilai seperti : solid, wavy, dotted, dashed, double
4initialmengembalikan nilai properti ke default-nya
5inheritefek dari inherit menghasilkan nilai yang mengikuti induk(parent element)

Value text-decoration-line wajib digunakan, sedangankan text-decoration-color dan text-decoration-style bersifat optional. saya sendiri sering menggunakan text-decoration untuk menghapus garis bawah yang secara default ada pada link yang dibuat dengan nilai 'none'. berikut contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti text-decoration </title>
        <style>
            h1{
                text-decoration: line-through solid red;
            }
            h2{
                text-decoration: underline overline;
            }
            a{
                color: #03c;
                text-decoration: none;
            }
        </style>
    </head>
    
    <body>
        <h1> Gotutorid.com </h1>
        <h2> Gotutorid.com </h2>
        <a href=""> klik disini </a>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti text-decoration pada css
Gambar 6

7. Text-Indent

tex-indent merupakan properti CSS yang bisa digunakan untuk membuat baris pertama pada paragraf/kalimat menjorok kedalam. Dalam penulisan paragraf, baris pertama yang menjorok kedalam disebut dengan indentasi. Jadi, text-indent dibuat khusus untuk mengatur indentasi pada paragraf.

Value atau Nilai utama yang digunakan untuk properti text-indent yaitu ukuran dalam bentuk persen dan pixel, cm, pt, em, pc, dsb. Anda juga bisa menggunakan nilai initial dan inherit untuk properti text-indent. berikut contoh kode CSS dengan properti text-indent.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti text-indent </title>
        <style>
            .px{
                text-indent: 50px;
            }
            .persen{
                text-indent: 2%;
            }
            .initial{
                text-indent: initial;
            }
        </style>
    </head>
    
    <body>
        <p class="px">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="persen">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <p class="initial">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti text-indent pada css
Gambar 7

8. Text-Shadow

seperti namanya, text-shadow merupakan properti CSS yang dibuat khusus untuk membuat dan mengatur bayangan pada teks. Jadi, misalkan properti tersebut digunakan pada judul artikel atau semacamnya, maka judul tersebut akan menampilkan efek bayangan.

Properti text-shadow berisi 3-4 Nilai sekaligus dalam satu deklarasi. Sintaks penulisannya seperti ini : text-shadow: val-1 val-2 val-3 val-4;. val-1 mengatur posisi bayangan horizontal, val-2 mengatur posisi bayangan vertical, val-3 mengatur keburaman(blur) bayangan.

Sedangkan val-4 bisa Anda isi dengan nilai berupa warna(color), misal red, hex, rgb(), hsl(), dsb. khusus untuk val-3 merupakan optional, jadi Anda tidak perlu menulis val-3 juga tidak masalah.

val-1, val-2, dan val-3 bisa Anda isi dengan nilai dalam bentuk ukuran(px,em,dsb). dan dibawah ini adalah contoh kode CSS.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti text-shadow </title>
        <style>
            .bayangan1{
                text-shadow: 3px 3px 8px blue;
            }
            .bayangan2{
                text-shadow: 3px 3px #FF0000;
            }
        </style>
    </head>
    
    <body>
        <h1 class="bayangan1"> Gotutorid.com </h1>
        <h1 class="bayangan2"> Gotutorid.com </h1>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti text-shadow pada css
Gambar 8

9. Text-Transform

text-transform merupakan properti CSS yang digunakan untuk mengatur penggunaan kapital pada teks. Artinya, Anda bisa merubah sebuah kalimat menjadi huruf besar semua walaupun tadinya Anda tulis dengan huruf kecil dan juga sebaliknya, bisa juga untuk merubah menjadi huruf kecil.

Properti text-transform memiliki 3 nilai utama antara lain : Capitalize, Uppercase, dan Lowercase. Capitalize merubah karakter pertama pada setiap kata menjadi huruf besar/kapital, Uppercase merubah semua karakter menjadi Besar, dan Lowercase merubah semua karakter menjadi kecil.

Selain ke-tiga nilai utama diatas, properti text-transform juga bisa Anda isi dengan Nilai none, initial, dan inherit. Untuk lebih jelasnya, dibawah ini saya sertakan contoh kode CSS dengan properti text-transform beserta nilai-nilainya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti text-transform </title>
        <style>
            .up{
                text-transform: Uppercase;
            }
            .low{
                text-transform: Lowercase;
            }
            .kapital{
                text-transform: Capitalize;
            }
        </style>
    </head>
    
    <body>
        <p class="up"> Huruf pada kalimat ini akan menjadi huruf besar semua </p>
        <p class="low"> HURUF PADA KALIMAT INI AKAN MENJADI HURUF KECIL SEMUA </p>
        <p class="kapital"> huruf pertama pada tiap kata akan menjadi huruf Kapital </p>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti text-transform pada css
Gambar 9

10. Unicode-Bidi

properti unicode-bidi pada CSS digunakan bersamaan dengan properti direction, sedangkan fungsinya untuk mengatur apakah teks harus diganti untuk mendukung banyak bahasa dalam satu dokumen yang sama.

Value atau nilai yang digunakan antara lain normal, embed, bidi-override. nilai defaultnya adalah normal, dan berikut contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti Unicode-bidi </title>
        <style>
            .bidi{
                direction: rtl;
                unicode-bidi: bidi-override;
            }
        </style>
    </head>
    
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
        </p>
        <p class="bidi">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
        </p>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti unicode-bidi pada css
Gambar 10

11. Vertical-Align

sama seperti namanya, properti vertical-align digunakan untuk mengatur perataan secara vertical, yang diatur bisa berupa image, atau elemen-elemen inline.

Untuk menggunakan vertical-align perlu dipahami karena vertical-align hanya mengatur elemen sel tabel dan elemen inline. Sedangkan pada umumnya, elemen div atau elemen P yang sering digunakan merupakan elemen blok.

Value atau Nilai yang digunakan antara lain : baseline, sub, super, top, text-top, dsb. untuk selengkapnya bisa Anda lihat pada tabel dibawah ini.

Daftar Tabel untuk Vertical-Align
NoValueKeterangan
1baselineelemen yang diatur disejajarkan dengan garis dasar induk. default value
2subelemen yang diatur selaras dengan induk elemen secara subsript. elemen yang dihasilkan posisinya agak kebawah
3superelemen yang diatur selaras dengan induk elemen secara supersript. elemen yang dihasilkan posisinya agak keatas
4text-topelemen disejajarkan dengan font elemen induk pada bagian atas
5text-bottomelemen disejajarkan dengan font elemen induk pada bagian bawah
6topelemen diposisikan diatas pada elemen induknya
7middleelemen diposisikan ditengah pada elemen induknya
8bottomelemen diposisikan dibawah pada elemen induknya
9px,em,cm,dsbnilai berdasarkan ukuran yang digunakan misal 10px, 1em, 0.5cm, 1pt, dsb
10%mengatur perataan vertical berdasarkan nilai persen yang digunakan misal 45%, 50%, etc

dan dibawah ini adalah contoh kode CSS dengan properti vertical-align.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti vertical-align </title>
        <style>
            div{
                display: table;
                width: 300px;
                height: 300px;
                border: 1px solid black;
            }
            h1{
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }
        </style>
    </head>
    
    <body>
        <div>
            <h1> kalimat ditengah elemen </h1>
        </div>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti vertical-align pada css
Gambar 11

12. Word-Spacing

word-spacing adalah properti CSS yang dibuat khusus untuk mengatur jarak spasi antar kata. Jadi, kata pertama dan kata kedua yang Anda tulis bisa diatur jaraknya. word-sapcing berbeda dengan letter-spacing, dimana word-spacing mengatur jarak antar kata, sedangkan letter-spacing mengatur jarak antar huruf.

Value atau Nilai yang digunakan untuk properti word-spacing yaitu ukuran dalam bentuk px, em, pc, pt, cm, dsb. selain ukuran, Anda juga memberi nilai normal, initial, dan inherit. berikut contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti word-spacing </title>
        <style>
            .normal{
                word-spacing: normal;
            }
            .px{
                word-spacing: 10px;
            }
            .em{
                word-spacing: 1em;
            }
        </style>
    </head>
    
    <body>
        <p class="normal"> contoh word-spacing dengan nilai normal </p>
        <p class="px"> contoh word-spacing dengan nilai pixel </p>
        <p class="em"> contoh word-spacing dengan nilai em </p>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti word-spacing pada css
Gambar 12

13. White-Space

Jika sebelumnya diatas membahas properti untuk mengatur jarak spasi antar kata, maka properti yang dibahas kali ini yaitu white-space atau ruang kosong, yaitu digunakan untuk mengatur jarak spasi secara keseluruhan pada paragraf yang diberi style white-space.

white space atau ruang kosong yang diatur antara lain : baris baru, spasi, tabs, text wrapping(pembungkus teks), dan white space diakhir baris. berikut value yang digunakan untuk properti white-space.

Daftar Tabel untuk White-Space
NoValueKeterangan
1normaldefault value
2nowrapgaris baru diatur ulang/collapse, spasi dan tab diatur ulang/collapse, text wrapping 'tidak', dan spasi diakhir baris dihilangkan.
3pregaris baru dipertahankan, spasi dan tab dipertahankan, text wrapping 'tidak', dan spasi diakhir baris dipertahankan.
4pre-wrapgaris baru dipertahankan, spasi dan tab dipertahankan, text wrapping 'iya', dan spasi diakhir baris.
5pre-linegaris baru dipertahankan, spasi dan tab diatur ulang/collapse, text wrapping 'iya', dan spasi diakhir baris dihilangkan.

sama seperti properti-properti sebelumnya, properti white-space juga bisa menggunakan nilai initial dan inherit. dan dibawah ini contoh kode CSS dengan properti white-space.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti white-space </title>
        <style>
            div{
                border: 1px solid black;
                width: 300px;
                padding: 3px;
                margin: 3px;
            }
            .normal{
                white-space: normal;
            }
            .pre{
                white-space: pre;
            }
            .nowrap{
                white-space: nowrap;
            }
        </style>
    </head>
    
    <body>
        <div>
            <p class="normal">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
            </p>
        </div>
        <div>
            <p class="pre">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
            </p>
        </div>
        <div>
            <p class="nowrap">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
            </p>
        </div>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti white-space pada css
Gambar 13

14. Word-Wrap

Properti word-wrap digunakan untuk melakukan pemotongan pada kata yang sangat panjang dan memindahnya ke baris baru. value atau nilai yang digunakan yaitu normal dan break-word. dan dibawah ini adalah contoh kodenya.

contoh kode/program/sintaks css
<!DOCTYPE html>
<html>

    <head>
        <title> contoh properti word-wrap </title>
        <style>
            div{
                border: 1px solid black;
                width: 150px;
                padding: 3px;
                margin: 3px;
            }
            .normal{
                word-wrap: normal;
            }
            .break{
                word-wrap: break-word;
            }
        </style>
    </head>
    
    <body>
        <div>
            <p class="normal">
                terdapat kata panjang tanpa spasi yaitu 
                "katayangsangatpanjangtanpaspasi" dan diatur dengan nilai normal
            </p>
        </div>
        <div>
            <p class="break">
                terdapat kata panjang tanpa spasi yaitu 
                "katayangsangatpanjangtanpaspasi" dan diatur dengan nilai break-word
            </p>
        </div>
    </body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

contoh hasil penggunaan dari properti word-wrap pada css
Gambar 14