Text Overflow Ellipsis Using Css

/ Published in: CSS
Save to your folder(s)

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

Copy this code and paste it in your HTML
  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. }

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

Report this snippet


RSS Icon Subscribe to comments

You need to login to post a comment.