fix #2860: truncate .dl-horizontal terms and reset to stacked for <767px layouts

7 files changed, 42 insertions, 0 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 7f6f5dd76..674503a73 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index a8457dc45..106fed157 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -139,6 +139,15 @@
   .container-fluid {
     padding: 0;
   }
+  .dl-horizontal dt {
+    float: none;
+    clear: none;
+    width: auto;
+    text-align: left;
+  }
+  .dl-horizontal dd {
+    margin-left: 0;
+  }
   .container {
     width: auto;
   }
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 02949da9f..201d917a8 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -458,6 +458,9 @@ dd {
   margin-left: 9px;
 }
 .dl-horizontal dt {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   float: left;
   clear: left;
   width: 120px;
diff --git a/docs/base-css.html b/docs/base-css.html
index 0a1ea0d9d..647b396c6 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -371,7 +371,14 @@
         <dd>Donec id elit non mi porta gravida at eget metus.</dd>
         <dt>Malesuada porta</dt>
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
+      <hr>
+      <p>
+        <span class="label label-info">Heads up!</span>
+        Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
+      </p>
     </div>
   </div><!-- /row -->
 </section>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 0b6e17e69..66bf70474 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -294,7 +294,14 @@
         <dd>Donec id elit non mi porta gravida at eget metus.</dd>
         <dt>Malesuada porta</dt>
         <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+        <dt>Felis euismod semper eget lacinia</dt>
+        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
       </dl>
+      <hr>
+      <p>
+        <span class="label label-info">{{_i}}Heads up!{{/i}}</span>
+        {{_i}}Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.{{/i}}
+      </p>
     </div>
   </div><!-- /row -->
 </section>
diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less
index ba34b29a6..b2202b5b7 100644
--- a/less/responsive-767px-max.less
+++ b/less/responsive-767px-max.less
@@ -86,6 +86,21 @@
     padding: 0;
   }
 
+  // TYPOGRAPHY
+  // ----------
+  // Reset horizontal dl
+  .dl-horizontal {
+    dt {
+      float: none;
+      clear: none;
+      width: auto;
+      text-align: left;
+    }
+    dd {
+      margin-left: 0;
+    }
+  }
+
   // GRID & CONTAINERS
   // -----------------
   // Remove width from containers
diff --git a/less/type.less b/less/type.less
index 4e1407b85..779e85960 100644
--- a/less/type.less
+++ b/less/type.less
@@ -135,6 +135,7 @@ dd {
 // Horizontal layout (like forms)
 .dl-horizontal {
   dt {
+    .text-overflow();
     float: left;
     clear: left;
     width: 120px;