Responsive CSS Truncate and Ellipsis

We’ve all run into situations where we need to truncate text due to length constraints. Most of the time this simply requires a truncation function which determines the maximum length of text and if the string exceeds that length, truncates it and adds an ellipsis (“…”). But what about when we are developing responsive web applications that require text to be truncated according to the current device screen or browser size. Luckily CSS3 supports a text-transform property called “ellipsis”, this however also requires that the bounding box defined with an overflow and a definite width and height. Or does it…?

I’ve found an interesting way to implement CSS text truncation in a responsive setting that can be used with responsive layouts such as Pure, Bootstrap, etc.

The following code creates a single line responsive truncate and ellipsis behavior.

.truncate-ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

.truncate-ellipsis &gt; * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="truncate-ellipsis">
    <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo nibh. Sed cursus ante ut nunc molestie viverra.
    </span>
</div>

This works by taking a parent element, in this case a div with the class truncate-ellipsis and turning it into a display type table with a fixed table layout. Its child element, in this case a span is transformed into a table cell with the overflow set to hidden and the text-transform property set to ellipsis. This of course can be modified to suit specific needs of height and container size and should act as a pretty good starting point for basic implementation.

24 Comments

Johnnnnny · February 6, 2016 at 10:53 am

This is great,thanks for sharing! 🙂

godlikemouse · February 6, 2016 at 12:07 pm

You’re very welcome.

Tidiane. · April 26, 2016 at 1:39 am

Thanks you ! That’s nice !

mary · May 3, 2016 at 4:35 am

Thank you, this is is a life saver!

godlikemouse · May 3, 2016 at 8:45 pm

Glad it helped 🙂

vincenzorizza · May 19, 2016 at 2:46 am

Extremely usefull for email templates
… You rock man!

godlikemouse · May 19, 2016 at 10:33 am

Awesome, glad it helped.

GatherWorks · June 14, 2016 at 6:53 am

Thanks for sharing!! Works like a charm

godlikemouse · June 17, 2016 at 1:52 pm

Glad to help.

Mark Serrano · September 1, 2016 at 9:22 am

Very clever. Very effective.

godlikemouse · September 1, 2016 at 2:12 pm

Thanks

Jordan · February 6, 2017 at 1:30 am

Great stuff! Saved me a heap of time

godlikemouse · February 6, 2017 at 9:08 am

Awesome, glad it helped. 🙂

Nenad · March 28, 2017 at 1:22 pm

Any idea how to have scroll-able content resulting in a box like your html preview is?
overflow:scroll does not seem to work.

godlikemouse · March 28, 2017 at 1:26 pm

Hi Nenad,

Certainly, just set the overflow property on the containing element to either “auto” for scroll/no scroll depending on content size or to “scroll” to enforce scrollbars always present.

#myDiv { overflow: auto }

Parsh · July 24, 2017 at 3:51 pm

You can change display: table to flex as well. And remove display:table-cell

godlikemouse · August 17, 2017 at 8:16 pm

Good to know, thanks for sharing.

noobcoder · November 3, 2017 at 7:58 pm

godlikemouse .. u r truly a god ! Thank you so much for this .. saved me a lot of time.

godlikemouse · November 3, 2017 at 10:36 pm

Sure thing, glad it helped 🙂

Amil · September 4, 2019 at 6:04 am

Thanks a lot 🙂

godlikemouse · September 4, 2019 at 10:13 am

Sure thing, glad it helped.

Tigran · February 15, 2020 at 6:57 am

Thank you, man. Rock on!

godlikemouse · February 15, 2020 at 8:28 am

You’re welcome, glad to help.