Bootstrap 4 truncate text display at least two line

user_10164787 0
Viewed 5940

I have a paragraph where I am trying to truncate it by bootstrap class text-truncate. In output I am getting only one line.

<p class="text-truncate" style="max-width:300px;">
    Resize the browser window to see that its width (max-width) will change at different breakpoints.Resize the browser window to see that its width (max-width) will change at different breakpoints
</p>

Getting output

Resize the browser window to see that its wid...

Expecting output

Resize the browser window to see that its width (max-width) 
will change at different breakpoints...

In inline css I have tried -webkit-line-clamp: 2, getting same result. How can I get multiple line using bootstrap text-truncate ?

bootstrap-4 twitter-bootstrap css
1 Answers

Not built directly into Boostrap4 but here's the method from CSS tricks -- Bootstrap's code looks like it's built specifically for 1 line. This method, the width needs to be set at the parent element.

.text-truncate-container {
    width: 250px;
}
.text-truncate-container p {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
<div class="text-truncate-container"><p class="text-truncate">Resize the browser window to see that its width (max-width) will change at different breakpoints.Resize the browser window to see that its width (max-width) will change at different breakpoints.</p></div>

user_58184060
Related