Coding Tip! Bootstrap4: How to make text “…” when it’s too long?
Sep 4, 2018 · 1 min read
A lot of times in responsive web programming we’re facing that when the text is too long, it might break the line into two which we want it to be in the same line and display “…” for the part that’s too long.

The solution is to use text-overflow: ellipsis to solve this issue like this.
Ref: https://www.w3schools.com/cssref/css3_pr_text-overflow.asp
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
However, in this post, we’re teaching you that for using bootstrap4 there’s actually a solution by using a class called: text-truncate
Praeterea iter est…
Praeterea iter est…
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>Ref: https://getbootstrap.com/docs/4.0/utilities/text/
That’s it! Go ahead and try it!
