0

i am trying to have a div element, which when i insert a text inside it, the div element's CSS style can break a long text into multiple lines and also when it reaches the div height, the end of the last line gets ellipsis(...)

my div has a static height and width in pixels. my problem is that i have tried using "overflow-wrap:break-word", and the ellipsis wont work, but without it, the ellipsis works but the div will only have one line, which i want multiple lines,not one.

<div style="overflow:hidden;white-space:no-wrap;text-overflow:ellipsis;overflow-wrap: break-word;height:50px;width:400px;"></div>
arhak
  • 2,488
  • 1
  • 24
  • 38
hossein1976
  • 1
  • 5

1 Answers1

0

If your height is static , Its easy to use the below style.

<div style="overflow:hidden;width:400px;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;"></div>

"-webkit-line-clamp" will specify the ellipsis will appear after the specified number of lines. This will work with the combination of webkit-box-orient: vertical; and display: -webkit-box;

Girimurugan
  • 36
  • 2
  • thanks Girimurugan,does -webkit work on all browsers or only on firefox? and is this the only way? and if the height isn't static, it will be impossible right? – hossein1976 May 19 '20 at 14:00
  • Even the height is non static also , this css will work, line-clamp style is to specify the number lines to be displayed . – Girimurugan May 20 '20 at 05:18