Coding Tip! Bootstrap4: How to make text “” when it’s too long?

txshon
txshon
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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade