css - multi line line-clamp (ellipsis) doesn't work

Question

problem image

I applied this class to h3 tag.

.ellipsis-2 {
  $lines: 2;
  $line-multiple: 1.3;
  $font-size: 1em;
  display: block;
  display: -webkit-box;
  max-height: $font-size * $line-multiple * $lines;
  line-height: $font-size * $line-multiple;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

As you saw in image, there is full lines of text and ellipsis didn't show.

But when I resize screen, ellipsis works fine.

Problem occured only the first time page rendering.

Any adivce?

Answer 1

This is my solution to this:

HTML

<mat-expansion-panel>
  <mat-expansion-panel-header>
    {{ stuff here }}
  </mat-expansion-panel-header>
  <div class="mat-expansion-panel-content">
    <div class="mat-expansion-panel-body">
      {{ stuff here }}
    </div>
  </div>
</mat-expansion-panel>

CSS

.mat-expansion-panel-body {
  visibility: visible;
}

Set visibility property of the panel content's child to visible.

So, you can avoid the wrong rendering on the first load. I was hitting my head against the wall for two days in order to solve this. I hope it can save someone some time.

Answer 2

Almost an year old post, still answering as this might help someone.

This could happen if the element with -webkit-line-clamp has it's visibility set to hidden when it first renders, either directly or by inheriting from one of its parent. This is due to this webkit bug: -webkit-line-clamp is not respected when visibility is hidden.

As a workaround, instead of visibility, you can set display: none if possible.

Answer 3

Worked for me with Angular in July 2022 on Chrome and Safari, when this block size is constrained by parent with flex-basis:

.your-class {
    -webkit-line-clamp: 2;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    word-break: break-word;
}

Thanks to @Leonardo Rick

Answer 4

If your problem is with a framework such as Angular that runs a autoprefixer on styles, maybe this solution will work for you: https://medium.com/@gawadnikita/angular-6-issue-of-line-clamp-css-not-working-a6b591bda9bf

overflow: hidden;`
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

Add a /* autoprefixer: ignore next */ exactly before -webkit-box-orient: vertical; and this should work