Posted By

chillyjames on 04/16/13


Tagged

text overflow ellipsis


Versions (?)

Text Overflow Ellipsis Using Css


 / Published in: CSS
 

URL: http://docs.tinyfactory.co/css/2012/08/11/text-overflow-ellipsis-using-CSS.html

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.