CSS Text-overflow: Ellipsis, Clip, String [Tiga titik di Akhir Teks]

Deklarasi text-overflow memungkinkan Anda mengatur teks yang terpotong, yaitu teks yang tidak sesuai dengan kotaknya.


Deklarasi text-overflow memungkinkan Anda untuk berkompromi dengan teks terpotong: yaitu, teks yang tidak sesuai dengan kotaknya. Tidak sesuai dengan kotaknya (div) berarti bahwa teks lebih panjang atau lebih lebar dari kotaknya.

Ada dua keadaan yang terjadi pada teks semacam ini.
Pertama, teks akan berpindah secara otomatis ke baris berikutnya setelah mencapai batas tepi kotak.

Contoh, saya menulis teks dalam sebuah kotak selebar 200px, hasilnya seperti di bawah ini:

Teks ini lebih panjang dari pada lebar kotak. Lebar kotak telah ditetapkan 200px.


Kedua, teks akan terus mengalir melewati batas tepi kotak.

Contoh:

Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas ini terlihat sangat tak elok, bukan?


Mengatasi ini tidaklah sulit. Kita hanya perlu menerapkan properti text-overflow. Setelah text-overflow diterapkan hasilnya akan nampak seperti di bawah ini.

Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas akan terpotong dan tak terlihat karena menggunakan text-overflow.

Terlihat lebih elok, kan?

Tetapi itu saja tidak cukup. Itu masih terlihat kurang elok karena pembaca mungkin akan bertanya-tanya apakah teks tersebut masih ada lanjutannya atau tidak. Oleh karena itu ditambahkanlah titik-titik atau tiga titik untuk menggantikan teks yang terpotong. Dengan begitu pembaca akan mengetahui bahwa teks tersebut ada lanjutannya. Lihat screenshot yang saya berikan di awal. Judul artikel yang panjang dalam hasil pencarian Google akan terpotong dan diganti titik-titik.


Deklarasi text-overflow memungkinkan Anda mengatur teks yang terpotong, yaitu teks yang tidak sesuai dengan kotaknya. text-overflow hanya berfungsi bila:
  1. Kotak memiliki overflow selain visible (dengan overflow: visible teks akan mengalir ke luar kotak)
  2. Kotak memiliki white-space: nowrap tanpa ini teks akan berpindah ke baris berikutnya setelah teks mencapai batas tepi.

Oleh karena itu kotak (elemen) harus memiliki kedunya, yaitu: white-space: nowrap dan overflow: hidden:

div.teks {
 border: 1px solid #000000;
 white-space: nowrap;
 overflow: hidden;
}

CSS lengkapnya seperti ini:

div.teks {
        border: 1px solid #000000;
        white-space: nowrap;
        overflow: hidden;
        width:200px
}

div.ellipsis {
        text-overflow: ellipsis;
}
div.clip {
        text-overflow: clip;
}
div.string {
        text-overflow: "...Next";
}

HTML-nya seperti ini:


<div class="teks ellipsis">Teks ini lebih panjang dari pada lebar kotak. Lebar kotak telah ditetapkan 200px.</div>
<div class="teks clip">Teks ini lebih panjang dari pada lebar kotak. Lebar kotak telah ditetapkan 200px.</div>
<div class="teks string">Teks ini lebih panjang dari pada lebar kotak. Lebar kotak telah ditetapkan 200px.</div>

Ada tiga nilai yang bisa diterapkan pada properti text-overflow. Contoh penerapannya sebagai berikut.

ellipsis

Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas akan terpotong dan tak terlihat karena menggunakan text-overflow:ellipsis.


clip

Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas akan terpotong dan tak terlihat karena menggunakan text-overflow:clip.


string

Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas akan terpotong dan tak terlihat karena menggunakan text-overflow:string.


overflow: auto


Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas akan terpotong dan tak terlihat karena menggunakan text-overflow:ellipsis.


Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas akan terpotong dan tak terlihat karena menggunakan text-overflow:string.

COMMENTS

BLOGGER: 2
  1. CSS Text-overflow: Ellipsis, Clip, String [Tiga titik di Akhir Teks]

    ReplyDelete
  2. wah.. sangat membantu, tapi saya ingin menampilkan 2 baris text dan setelah 2 baris akan muncul ellipsis (...) apakah itu bisa?

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: CSS Text-overflow: Ellipsis, Clip, String [Tiga titik di Akhir Teks]
CSS Text-overflow: Ellipsis, Clip, String [Tiga titik di Akhir Teks]
Deklarasi text-overflow memungkinkan Anda mengatur teks yang terpotong, yaitu teks yang tidak sesuai dengan kotaknya.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWz8y6TMgFOKVV4gsdtcMlG-zcXVct6_DgrZ8U1CZ4e76usjDYTkjfDHfPQt7kXNajwwq0VX6OLhozxyMmWnL-uy2TPwmeokRYrRoqIE9D3niq93Lx0G-B7k5OM_5HeEZ0K5BdpsJX2g/s1600/Text-overflow+Ellipsis+Clip+String+%5BTiga+titik+di+Akhir+Teks%5D.PNG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHWz8y6TMgFOKVV4gsdtcMlG-zcXVct6_DgrZ8U1CZ4e76usjDYTkjfDHfPQt7kXNajwwq0VX6OLhozxyMmWnL-uy2TPwmeokRYrRoqIE9D3niq93Lx0G-B7k5OM_5HeEZ0K5BdpsJX2g/s72-c/Text-overflow+Ellipsis+Clip+String+%5BTiga+titik+di+Akhir+Teks%5D.PNG
Jelas in Blog
https://jelasinblog.blogspot.com/2014/12/css-text-overflow-ellipsis-clip-string.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/12/css-text-overflow-ellipsis-clip-string.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content