Truncating long strings with CSS feasible yet

Question

Is there any good way of truncating text with plain HTML and CSS  so that dynamic content can fit in a fixed-width-and-height layout   I ve been truncating server-side by logical width  i e  a blindly-guessed number of characters   but since a  w  is wider than an  i  this tends to be suboptimal  and also requires me to re-guess  and keep tweaking  the number of characters for every fixed width   Ideally the truncation would happen in the browser  which knows the physical width of the rendered text   I ve found that IE has a text-overflow  ellipsis property that does exactly what I want  but I need this to be cross-browser   This property seems to be  somewhat   standard but isn t supported by Firefox   I ve found various  workarounds based on overflow  hidden  but they either don t display an ellipsis  I want the user to know the content was truncated   or display it all the time  even if the content wasn t truncated    Does anyone have a good way of fitting dynamic text in a fixed layout  or is server-side truncation by logical width as good as I m going to get for now

User · Answer

OK  Firefox 7 implemented text-overflow  ellipsis as well as text-overflow   string   Final release is planned for 2011-09-27

User · Answer

2014 March  Truncating long strings with CSS  a new answer with focus on browser support  Demo on http   jsbin com leyukama 1   I use jsbin because it supports old version of IE     lt style type  text css  gt      span           display  inline-block          white-space  nowrap          overflow  hidden          text-overflow  ellipsis          IE6   Firefox 7   Opera 11   Chrome  Safari             -o-text-overflow  ellipsis       Opera 9  amp  10             width  370px     note that this width will have to be smaller to see the effect           lt  style gt    lt span gt Some very long text that should be cut off at some point coz it s a bit too long and the text overflow ellipsis feature is used lt  span gt    The -ms-text-overflow CSS property is not necessary  it is a synonym of the text-overflow CSS property  but versions of IE from 6 to 11 already support the text-overflow CSS property   Successfully tested  on Browserstack com  on Windows OS  for web browsers    IE6 to IE11 Opera 10 6  Opera 11 1  Opera 15 0  Opera 20 0 Chrome 14  Chrome 20  Chrome 25 Safari 4 0  Safari 5 0  Safari 5 1 Firefox 7 0  Firefox 15   Firefox  as pointed out by Simon Lieschke  in another answer   Firefox only support the text-overflow CSS property from Firefox 7 onwards  released September 27th 2011    I double checked this behavior on Firefox 3 0  amp  Firefox 6 0  text-overflow is not supported    Some further testing on a Mac OS web browsers would be needed   Note  you may want to show a tooltip on mouse hover when an ellipsis is applied  this can be done via javascript  see this questions  HTML text-overflow ellipsis detection and HTML - how can I show tooltip ONLY when ellipsis is activated  Resources    https   developer mozilla org en-US docs Web CSS text-overflow Browser compatibility http   css-tricks com snippets css truncate-string-with-ellipsis  https   stackoverflow com a 1101702 759452 http   www browsersupport net CSS text-overflow http   caniuse com text-overflow http   msdn microsoft com en-us library ie ms531174 v vs 85  aspx http   hacks mozilla org 2011 09 whats-new-for-web-developers-in-firefox-7

User · Answer

Update  text-overflow  ellipsis is now supported as of Firefox 7  released September 27th 2011   Yay  My original answer follows as a historical record   Justin Maxwell has cross browser CSS solution  It does come with the downside however of not allowing the text to be selected in Firefox  Check out his guest post on Matt Snider s blog for the full details on how this works   Note this technique also prevents updating the content of the node in JavaScript using the innerHTML property in Firefox  See the end of this post for a workaround   CSS   ellipsis       white-space  nowrap      overflow  hidden      text-overflow  ellipsis      -o-text-overflow  ellipsis      -moz-binding  url  assets xml ellipsis xml ellipsis        ellipsis xml file contents   lt  xml version  1 0   gt   lt bindings   xmlns  http   www mozilla org xbl    xmlns xbl  http   www mozilla org xbl    xmlns xul  http   www mozilla org keymaster gatekeeper there is only xul   gt       lt binding id  ellipsis  gt           lt content gt               lt xul window gt                   lt xul description crop  end  xbl inherits  value xbl text  gt  lt children  gt  lt  xul description gt               lt  xul window gt           lt  content gt       lt  binding gt   lt  bindings gt    Updating node content  To update the content of a node in a way that works in Firefox use the following   var replaceEllipsis node  content        node innerHTML   content         use your favorite framework to detect the gecko browser     if  YAHOO env ua gecko            var pnode   node parentNode              newNode   node cloneNode true            pnode replaceChild newNode  node              See Matt Snider s post for an explanation of how this works

User · Answer

If you re OK with a JavaScript solution  there s a jQuery plug-in to do this in a cross-browser fashion - see http   azgtech wordpress com 2009 07 26 text-overflow-ellipsis-for-firefox-via-jquery

User · Answer

Another solution to the problem could be the following set of CSS rules    ellipsis   white-space nowrap   overflow hidden      ellipsis after    content            The only drawback with the above CSS is that it would add the       irrespective of whether the text-overflows the container or not  Still  if you have a case where you have a bunch of elements and are sure that content will overflow  this one would be a simpler set of rules   My two cents  Hats off to the original technique by Justin Maxwell

[css] Truncating long strings with CSS: feasible yet?

Examples related to css

Examples related to text

Examples related to layout

Examples related to cross-browser

Examples related to truncate