Advanced Search

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.

Expand | Embed | Plain Text

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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.