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 and white-space: nowrap set.
• The display must be inline-block or block.

More to read at MDN on text overflow.