Posted By

chillyjames on 04/16/13


text overflow ellipsis

Versions (?)

Text Overflow Ellipsis Using Css

 / Published in: CSS


The CSS text overflow ellipsis solution is perfect for single line truncations. I use this constantly when building mobile or responsive applications.

  1. span {
  2. display:block; /* because we're using a span class */
  3. white-space: nowrap; /* This prevents the content from breaking onto another line */
  4. width: 100%; /* this should be the width of your content */
  5. overflow: hidden; /* hides the text that is outside of your width */
  6. text-overflow: ellipsis; /* creates our ellipsis! */
  7. }

Report this snippet  

You need to login to post a comment.