Overflow Ellipsis

There are obviously a few ways to do this. Let’s start with the most badass.

CSS-only Multi-line Ellipsis

This is the ultimate — multi-line text-overflow ellipsis implemented with only CSS.

.box {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

The catch? Firefox Browser support is not complete.

Single-line Overflow Ellipsis

There is, of course, text-overflow:ellipsis; the classic CSS-native ellipsis overflow technique. This works well for one line.

This only works when the following are true:

• The element’s width must be constrained in px (pixels). Width in % (percentage) won’t work.
• The element must have overflow:hidden and white-space:nowrap set.

.box {
  display: block;/* Change it as per your requirement. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Note: you can also use a secret workaround using width: calc(100%); or some other % percentage.

Using JS

This is always an option.

const truncated = "some string that is long".substring(0, 10).concat('...')
// "some strin..."