Added euiTextBreakWord mixin to the euiTitle mixin

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `euiTextBreakWord()` mixin to the `euiTitle()` mixin to ensure all titles break long words ([#5107](https://github.com/elastic/eui/pull/5107))
+- Added `euiTextBreakWord()` to `EuiFormLabels` ([#5107](https://github.com/elastic/eui/pull/5107))
+
 **Bug fixes**
 
 - Fixed `EuiSuperSelect`'s focus keyboard behavior when no initial value is passed, and focus label behavior ([#5097](https://github.com/elastic/eui/pull/5097))

src/components/form/form_row/_form_row.scss

@@ -38,7 +38,6 @@
   align-items: stretch;
 
   .euiFormRow__label {
-    @include euiTextBreakWord;
     hyphens: auto;
     max-width: 100%; // Fixes IE
   }

src/components/table/_table.scss

@@ -145,7 +145,6 @@
  * 1. Vertically align all children.
  * 2. The padding on this div allows the ellipsis to show if the content is truncated. If
  *    the padding was on the cell, the ellipsis would be cropped.
- * 3. Support wrapping.
  * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing
  *    the cell.
  */
@@ -175,7 +174,7 @@
 .euiTableHeaderCell,
 .euiTableFooterCell,
 .euiTableCellContent--truncateText {
-  white-space: nowrap; /* 3 */
+  @include euiTextTruncate;
 
   .euiTableCellContent__text {
     overflow: hidden;

src/components/toast/_toast.scss

@@ -88,7 +88,6 @@ $euiToastTypes: (
 
 .euiToastHeader__title {
   @include euiTitle('xs');
-  @include euiTextBreakWord;
   font-weight: $euiFontWeightLight;
 }
 

src/global_styling/mixins/_form.scss

@@ -1,6 +1,7 @@
 // Labels
 @mixin euiFormLabel {
   @include euiFontSizeXS;
+  @include euiTextBreakWord;
   color: $euiTitleColor;
   font-weight: $euiFontWeightSemiBold;
 }

src/global_styling/mixins/_typography.scss

@@ -58,6 +58,7 @@
 }
 
 @mixin euiTitle($size: 'm') {
+  @include euiTextBreakWord;
   color: $euiTitleColor;
 
   @if (map-has-key($euiTitles, $size)) {