Posted over 10 years ago. Visible to the public.

Use CSS "text-overflow" to truncate long texts

When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets.

The CSS property text-overflow: ellipsis has been around for quite a long time now but since Firefox did not support it for ages, you did not use it. Since Firefox 7 you can! Archive

Note that this only works for single-line texts. If you want to truncate tests across multiple lines, use a JavaScript solution like Superclamp Archive . There is also -webkit-line-clamp which works only on Chrome.


Consider this HTML and Sass for a box that is not wide enough for its content:

Hello universe!

width: 100px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis // This is where the magic happens

While incompatible browsers (IE 5.5, Firefox up until 6) will just cut off the text when it reaches its container's borders, in most browsers you will see something like:

Hello univ...

Nice, eh?

When you are doing this for a mobile application, also use -o-text-overflow to target Opera Mobile and Opera Mini which still use the prefixed version.

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Arne Hartherz
Last edit:
over 6 years ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more