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" >
2021-09-09 13:30:41 +02:00
This text is quite long, and will be truncated once displayed.
2019-05-23 11:56:03 +02:00
< / div >
< / div >
<!-- Inline level -->
< span class = "d-inline-block text-truncate" style = "max-width: 150px;" >
2021-09-09 13:30:41 +02:00
This text is quite long, and will be truncated once displayed.
2019-05-23 11:56:03 +02:00
< / span >
{{< / example > }}
