Text truncation

Truncate long strings of text with an ellipsis.

Example #

For longer content where it is important for the text to not overflow horizontally or wrap onto the next line, you can add a .text-truncate class to truncate the text with an ellipsis. Please note, this requires display: block or display: inline-block.

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
HTML 
<!-- Block level -->
<div class="row">
  <div class="col-6 col-lg-4 text-truncate">
    The quick brown fox jumps over the lazy dog
  </div>
</div>

<!-- Inline-block level -->
<div class="d-inline-block specific-w-150 text-truncate">
  The quick brown fox jumps over the lazy dog
</div>
Up next
Vertical rule

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.