From: Mark Otto <markdotto@gmail.com>
Date: Sun, 2 Jul 2017 03:27:15 +0000 (-0700)
Subject: Add .text-truncate class. We already had a mixin and documented the class, so this... 
X-Git-Tag: v4.0.0-beta~72
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6f073edc791c63ad0f93ba9845de35e0f7e2f2ff;p=thirdparty%2Fbootstrap.git

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

diff --git a/docs/4.0/utilities/text.md b/docs/4.0/utilities/text.md
index 32e11335dd..8dcbba078c 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 7f20ed76ee..8cbd0016cc 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();
+}