Bootstrap label multiline ellipsis

I’m using BS4 labels and i’m trying to show text over 2 lines with an ellipsis at the end of the second line.
I’ve tried the many examples online such as

  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
          line-clamp: 2;
  -webkit-box-orient: vertical;

but i haven’t had any luck.

Is there a way for this to work?


Replace your first line as below. I tested it on Chrome and Safari.

#yourLabel {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;

Thanks for your reply.

I couldn’t get it to work. I put your code into the project CSS. Is that right?
Maybe i am missing something else also.

Yes, you can place the CSS into the project CSS.
Did you change #yourLabel to your label’s ID?

Also you may need to set the label’s width property if you want to limit the size.

I placed the code in the project CSS and i am using the correct label ID.
I still couldn’t get it to work. Did you try using a BS4 label?


Before placing the style

Then I added the style to the project CSS

It limits to 2 lines

Thanks. Finally got that working. Not sure what i had wrong.

If i change the label text at runtime, is there a way to keep this style?


That’s great! Yes, you can change the text at runtime.

It the text is changed at runtime, the style is lost (the text appears up until the width of the label on a single line).

Does the style need to be added again?


Something like this doesn’t work?

Label1.innerText = 'Your new label text';

I found where i was going wrong. The text can be changed at run time but when i was testing, i was using one long string such as


and this doesn’t apply the style to it (it keeps the text on a single line)
However, if i put spaces in the string such as


then the style works as expected.

Thanks for your help

1 Like