Bootstrap label multiline ellipsis

#1

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?

Thanks

#2

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;
}
#3

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.

#4

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.

#5

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?

Thanks

#6

Yes.
Before placing the style

Screen Shot 2023-03-28 at 11.52.19 AM
Screen Shot 2023-03-28 at 11.52.19 AM1588×904 78.1 KB

Then I added the style to the project CSS

Screen Shot 2023-03-28 at 11.55.13 AM
Screen Shot 2023-03-28 at 11.55.13 AM850×256 53.5 KB

It limits to 2 lines

Screen Shot 2023-03-28 at 11.56.06 AM
Screen Shot 2023-03-28 at 11.56.06 AM1544×722 107 KB

#7

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?

Thanks

#8

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

#9

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?

Thanks

#10

Something like this doesn’t work?

Label1.innerText = 'Your new label text';

#11

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

Label1.value = "AAAAAAAABBBBBBBBBBBBBBB";

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

Label1.value = "AAAAAAA ABBBBBBB BBBBB BBB";

then the style works as expected.

Thanks for your help

1 Like