CSS Ellipsis
There are a few thing I’m constantly (whenever I need it in intervals of a few month) required to look up.
CSS Ellipsis for text overflow is one of them.
So this is kind of a not to myself - whenever I write something down it tend to remember it better.
.trimmed-text{
text-overflow: ellipsis;
width: 180px;
overflow: hidden;
white-space: nowrap;
}
The rules are:
- The element’s width must be constrained - width in percentage do not work.
- The element must have
overflow: hidden
andwhite-space: nowrap
set. - The
display
must beinline-block
orblock
.
More to read at MDN on text overflow.