@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

# Text truncation

Truncate long strings of text with an ellipsis.

For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis. Requires `display: inline-block` or `display: block`.

This text is quite long, and will be truncated once displayed.
This text is quite long, and will be truncated once displayed.

    <!-- text truncation-->
     <!-- Block level -->
     <div class="row">
       <div class="col-2 text-truncate">
         This text is quite long, and will be truncated once displayed.
       </div>
     </div>

     <!-- Inline level -->
     <span class="d-inline-block text-truncate" style="max-width: 150px;">
       This text is quite long, and will be truncated once displayed.
     </span>

@@include("../partials/scripts.html")