Wrap a text within only two lines inside div

user_597983 0
Viewed 360259

I want to wrap a text within only two lines inside div of specific width. If text goes beyond the length of two lines then I want to show ellipses. Is there a way to do that using CSS?

e.g.

Sample text showing wrapping
of text in only two line...
css html
12 Answers

CSS only

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
user_60852850

@Asiddeen bn Muhammad's solution worked for me with a little modification to the css

    .text {
 line-height: 1.5;
  height: 6em; 
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 }
user_102071160

Below worked for me:

CSS:

.longWordBreakParent {
  display: flex;
}
.longWordBreak {
  word-break: break-all;
}

HTML:

<div className="longWordBreakParent">
    <span className='longWordBreak'>someverylongtextthatcannotbefitinoneline</span>
</div>
user_9844710

In all these examples, let’s assume we have:

#someDiv {
  width: 250px;
  overflow: hidden;
}
user_83086740
Related