Overflow:hidden dots at the end

css, html

Solution

You can use text-overflow: ellipsis; which according to caniuse is supported by all the major browsers.

Here's a demo on jsbin.

.cut-text { 
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 160px; 
  height: 1.2em; 
  white-space: nowrap;
}

<div class="cut-text">
I like big butts and I can not lie.
</div>

Problem

Let's say I have a string "I like big butts and I cannot lie" and I cut it with `overflow:hidden`, so it displays something like this: I like big butts and I cann cutting off the text. Is it possible to display this like this: I like big butts and I cann... using CSS?

Original source

Related problems