2019-05-23 11:56:03 +02:00
---
layout: docs
2019-06-04 20:46:52 +02:00
title: Text truncation
description: Truncate long strings of text with an ellipsis.
2019-05-23 11:56:03 +02:00
group: helpers
2019-08-17 20:19:00 +02:00
toc: false
2019-05-23 11:56:03 +02:00
---
For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. **Requires `display: inline-block` or `display: block`.**
{{< example > }}
<!-- 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 >
{{< / example > }}
