CSS: Menampilkan hanya sebagian teks

Untuk beberapa kasus yang berkaitan dengan estetika, biasanya kita ingin menampilkan hanya sebagian teks di web. Tujuannya? Biar ga kepanjangan banget tulisannya. Kalau pun kepanjangan, otomatis di ujungnya muncul titik-titik memotong karakter yang dibutuhkan dan disesuaikan dengan lebar box/div yang tersedia.

Biar lebih jelas, gambarnya begini nih:

css text overflow

css text overflow

<!DOCTYPE html>
<html>
<head>
<style> 
div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}
</style>
</head>
<body>

<p>teks panjang panjang. Pasti ga mau ditampilin semua kan? ya kan? ya kan?</p>

<p>gunakan style <b>text-overflow:ellipsis</b></p>
<div class="test" style="text-overflow:ellipsis;">teks panjang panjang. Pasti ga mau ditampilin semua kan? ya kan? ya kan?</div>

<p>yang ini menggunakan style <b>text-overflow:clip</b></p>
<div class="test" style="text-overflow:clip;">teks panjang panjang. Pasti ga mau ditampilin semua kan? ya kan? ya kan?</div>

</body>
</html>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s