rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Add .text-truncate class. We already had a mixin and documented the class, so this fixes that.

Browse Source
This commit is contained in:
Mark Otto 2017-07-01 20:27:15 -07:00 committed by Mark Otto
parent cfb383cc01
commit 6f073edc79
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/4.0/utilities/text.md
View File

@ -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

4
scss/utilities/_text.scss
View File

@ -47,3 +47,7 @@
.text-hide {
@include text-hide();
}
.text-truncate {
@include text-truncate();
}