diff --git a/docs/content/components/truncate.md b/docs/content/components/truncate.md
index 9e5a4c5dee..c9b454ad01 100644
--- a/docs/content/components/truncate.md
+++ b/docs/content/components/truncate.md
@@ -7,18 +7,52 @@ bundle: truncate
 ---
 
 
-`.css-truncate` will shorten text with an ellipsis. The maximum width of the truncated text can be changed by overriding the max-width of `.css-truncate-target`. Unless the full text is so long that it affects performace, always add `title` to the truncated element so the full text can still be seen.
+The `css-truncate` class will shorten text with an ellipsis. Always add a `title` attribute to the truncated element so the full text remains accessible.
 
-```html live title="Truncate"
-<span class="branch-ref css-truncate css-truncate-target" title="really-long-branch-name">
-  really-long-branch-name
-</span>
+## Truncate overflow
+
+Combine the `css-truncate` and `css-truncate-overflow` classes to prevent text that overflows from wrapping.
+
+```html live
+<div class="col-3">
+  <div class="css-truncate css-truncate-overflow border p-3"
+    title="branch-name-that-is-really-long">
+    branch-name-that-is-really-long
+  </div>
+  <div class="border p-3 mt-3">
+    branch-name-that-is-really-long
+  </div>
+</div>
+```
+
+## Truncate target
+
+Combine the `css-truncate` and `css-truncate-target` classes for inline (or inline-block) elements with a fixed maximum width (default: `125px`).
+
+```html live
+Some text with a
+<strong class="css-truncate css-truncate-target"
+  title="branch-name-that-is-really-long">
+  branch-name-that-is-really-long
+</strong>
+```
+
+You can override the maximum width of the truncated text with an inline `style` attribute:
+
+```html live
+Some text with a
+<strong class="css-truncate css-truncate-target" style="max-width: 180px"
+  title="branch-name-that-is-really-long">
+  branch-name-that-is-really-long
+</strong>
 ```
 
 You can reveal the entire string on hover with the addition of `.expandable`.
 
-```html live title="Truncate Expandable"
-<span class="css-truncate expandable">
-  <span class="branch-ref css-truncate-target">this-is-a-really-long-branch-name</span>
-</span>
+```html live
+Some text with a
+<strong class="css-truncate css-truncate-target expandable"
+  title="branch-name-that-is-really-long">
+  branch-name-that-is-really-long
+</strong>
 ```
diff --git a/src/truncate/truncate.scss b/src/truncate/truncate.scss
index 7e38d828c6..8590f1b408 100644
--- a/src/truncate/truncate.scss
+++ b/src/truncate/truncate.scss
@@ -3,18 +3,22 @@
 // css-truncate will shorten text with an ellipsis.
 
 .css-truncate {
-  // Truncate double target
-  //
-  // css-truncate will shorten text with an ellipsis. The maximum width
-  // of the truncated text can be changed by overriding the max-width
-  // of the .css-truncate-target
+
+  // css-truncate-auto will shorten text with an ellipsis when overflowing
+  &.css-truncate-overflow,
+  .css-truncate-overflow,
   &.css-truncate-target,
   .css-truncate-target {
-    display: inline-block;
-    max-width: 125px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+  }
+
+  // css-truncate-target will shorten text with an ellipsis and a max width
+  &.css-truncate-target,
+  .css-truncate-target {
+    display: inline-block;
+    max-width: 125px;
     vertical-align: top;
   }