JSFiddle - React, Tailwind, and code Playground

by Novruz Rehimov

HTML

<div id="mydiv1">Sample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two lineSample text showing wrapping
of text in only two line</div>
<div id="mydiv2">Sample text showing wrapping
of text in only two line...</div>

CSS

#mydiv1,#mydiv2{
    text-overflow: ellipsis;
    line-height:20px;
    height:40px;
    width:300px;
    border:1px solid blue;
    overflow:hidden;
    white-space: pre;
}
#mydiv1{
    width:300px;
}
#mydiv2{
    width:75px;
}