Iwan Setiawan

Web & graphic designer, illustrator

Love digital design, follow me @intraktives

Pada tutorial kali ini saya akan membahas property dari CSS text. Property ini akan terasa manfaatnya bila kita menangani konten dalam bentuk teks. Ada 3 property yang akan dibahas :

  • overflow
  • word-wrap
  • word-break

 

Overflow

overflow mengatur bagaimana sebuah teks dipresentasikan kepada pengguna (user) bila teks melampaui kotak (container) dimana teks tersebut berada.

Ada 3 value berkaitan dengan overflow :

overflow : visible

Property ini mengatur bila tinggi body text melampaui tinggi kotak (container) dimana teks tersebut berada maka teks yang berada di luar kotak (container) tetap terlihat

overflow : hidden

Property ini mengatur bila tinggi body text melampaui tinggi kotak (container) dimana teks tersebut berada maka teks yang berada di luar kotak (container) tidak ditampilkan (hidden)

overflow : scroll

Property ini mengatur bila tinggi body text melampaui tinggi kotak (container) dimana teks tersebut berada maka kotak (container) akan memberi scroll agar seluruh body text tetap terlihat

 

Contoh text-overflow : visible

.visible{  
     width: 20em;
     height: 6em;
     border: dashed;
     font-size:1.4em;
     color: red;
     background-color: #ccc;
     overflow: visible;
}
Lorem ipsum dolor sit amet, vim at ponderum gloriatur consetetur, tation accommodare suscipiantur in eam, mei no stet nullam ancillae. Nostro admodum ea per, ei aliquam conceptam intellegam nam. Meliore vocibus ne mel, qui iudico altera verear in, eu mel accusata repudiare. Veniam prodesset cum ut

Contoh text-overflow : hidden

.hidden{  
     width: 20em;
     height: 6em;
     border: dashed;
     font-size:1.4em;
     color: red;
     background-color: #ccc;
     overflow: hidden;
}

Contoh text-overflow : scroll

.scroll{  
     width: 20em;
     height: 6em;
     border: dashed;
     font-size:1.4em;
     color: red;
     background-color: #ccc;
     overflow: scroll;
}
Lorem ipsum dolor sit amet, consecmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam tetur adipiscing elit, sed do eius

Word-Wrap

Property ini mengatur agar sebuat baris teks dipenggal dan menjadi sebuah baris baru bila teks terlalu panjang sehingga melampaui area di mana teks tersebut berada. Bisa kita lihat pada contoh di bawah ini

http://reactfordesigners.com/labs/reactjs_introduction_for_people_who_know_just_enough_jquery_to_get_by/

 

Untuk mengatasi masalah ini adalah dengan cara memberikan CSS propertyword-wrap: break-word

.wrap{
      width: 20em;
      border:solid 1px red;
      word-wrap: break-word;
	}

http://reactfordesigners.com/labs/reactjs_introduction_for_people_who_know_just_enough_jquery_to_get_by/

 

Word-Break

Property ini mengatur di bagian mana sebuah teks dipenggal untuk membuat baris baru. Ada 3 value yang berkaitan dengan propertyword-break .

word-break : normal

Property ini mengatur di mana sebuah baris teks dipenggal sebagaimana normalnya yaitu di antara kata untuk membentuk baris baru

word-break : break-all

Property ini mengatur sebuah baris teks dipenggal dimana saja termasuk dipenggal di tengah-tengah sebuah kata untuk membentuk baris baru

word-break : keep-all

Property ini mengatur bagaimana sebuah baris teks dipenggal sebagaimana normalnya yaitu di antara kata untuk membentuk baris baru, namun khusus pada teks berbahasa China, Jepang dan Korea

 

Contoh word-break : normal

.normal{
      width: 20em;
      border:solid 1px red;
      word-wrap: break-word;
	}

Space (ruang) memiliki peran penting di web design. Space layaknya “arena” bagi designer untuk menempatkan dan mengatur elemen-elemen design

 

Contoh word-break : break-all

.breakall{
      width: 20em;
      border:solid 1px red;
       word-wrap: break-all;
	}

Space (ruang) memiliki peran penting di web design. Space layaknya “arena” bagi designer untuk menempatkan dan mengatur elemen-elemen design

 

Contoh word-break : keep-all

Hasil dari penerapan dari property ini hasilnya sama dengan word-break : normal, hanya perbedaannya property ini khusus untuk teks dengan aksara China, Jepang dan Korea