Hello all,

Unfortunately this hacks only works on webkit based browsers. The CSS property text-overflow is originally meant to be used on single-line text only.

However you can use the following hack to obtain a pure CSS multiline text with ellipsis:

SCSS version:

$font-size: 14px;
$line-height: 1.3;
@for $i from 1 through 4 {
  .text__multiline-#{$i} {
    display: block;
    display: -webkit-box;
    height: $font-size*$line-height*$i;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

CSS version:

.text__multiline-3 {
  font-size: 14px;
  line-height: 1.2;
  height: 46px; // font-size * line-height * lines

  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

click here to view a preview fiddle by Martin Wolf