reverse no-wrap [ci visual]

Author: JKMarkowski

src/table.scss

@@ -125,13 +125,12 @@ $block: #{$fd-namespace}-table;
   }
 
   &__text {
-    word-break: break-all;
-    white-space: nowrap;
+    word-break: break-word;;
     overflow: hidden;
     text-overflow: ellipsis;
 
-    &--wrap {
-      white-space: normal;
+    &--no-wrap {
+      white-space: nowrap;
     }
   }
 

stories/table/__snapshots__/table.stories.storyshot

@@ -7393,16 +7393,16 @@ exports[`Storyshots Components/Table Primary 1`] = `
 
 
           <div
-            class="fd-table__text"
+            class="fd-table__text fd-table__text--no-wrap"
             style="max-width: 250px"
           >
 
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
 
           </div>
 
@@ -7456,13 +7456,14 @@ exports[`Storyshots Components/Table Primary 1`] = `
 
 
           <div
-            class="fd-table__text fd-table__text--wrap"
+            class="fd-table__text"
             style="max-width: 250px"
           >
 
                     Very long Text Wrapped, limited by max-width
                     Very long Text Wrapped, limited by max-width
                     Very long Text Wrapped, limited by max-width
+                    Very long Text Wrapped, limited by max-width
 
           </div>
 

stories/table/table.stories.js

@@ -88,13 +88,13 @@ export const primary = () => `
         <tr class="fd-table__row">
             <td class="fd-table__cell"><a class="fd-link">[email protected]</a></td>
             <td class="fd-table__cell">
-                <div class="fd-table__text" style="max-width: 250px">
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
-                    Very long Text, limited by max-width
+                <div class="fd-table__text fd-table__text--no-wrap" style="max-width: 250px">
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
+                    Very long Text Not Wrapped, limited by max-width
                 </div>
             </td>
             <td class="fd-table__cell">Middle Name</td>
@@ -104,7 +104,8 @@ export const primary = () => `
         <tr class="fd-table__row">
             <td class="fd-table__cell"><a class="fd-link">[email protected]</a></td>
             <td class="fd-table__cell">
-                <div class="fd-table__text fd-table__text--wrap" style="max-width: 250px">
+                <div class="fd-table__text" style="max-width: 250px">
+                    Very long Text Wrapped, limited by max-width
                     Very long Text Wrapped, limited by max-width
                     Very long Text Wrapped, limited by max-width
                     Very long Text Wrapped, limited by max-width