diff options
| -rw-r--r-- | docs/4.0/utilities/text.md | 8 | ||||
| -rw-r--r-- | scss/utilities/_text.scss | 4 |
2 files changed, 11 insertions, 1 deletions
diff --git a/docs/4.0/utilities/text.md b/docs/4.0/utilities/text.md index 32e11335d..8dcbba078 100644 --- a/docs/4.0/utilities/text.md +++ b/docs/4.0/utilities/text.md @@ -42,14 +42,20 @@ Prevent text from wrapping with a `.text-nowrap` class. </div> {% endexample %} -For longer content, you can add a `.text-truncate` class to truncate the 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`.** {% example html %} +<!-- 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> {% endexample %} ## Text transform diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 7f20ed76e..8cbd0016c 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -47,3 +47,7 @@ .text-hide { @include text-hide(); } + +.text-truncate { + @include text-truncate(); +} |