docs(item): clarify usage for text wrapping (#3315)

liamdebeasi · web-flow · commit 712cc0809459 · 2023-12-11T15:08:05.000-05:00
diff --git a/docs/api/item.md b/docs/api/item.md
@@ -25,7 +25,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an
 
 ## Basic Usage
 
-Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
+Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
 
 import Basic from '@site/static/usage/v8/item/basic/index.md';
 
diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md
@@ -5,14 +5,14 @@
 
 <ion-item>
   <ion-label>
-    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
 
 <ion-item>
-  <ion-label class="ion-text-wrap">
-    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+  <ion-label class="ion-text-nowrap">
+    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
diff --git a/static/usage/v7/item/basic/demo.html b/static/usage/v7/item/basic/demo.html
@@ -26,14 +26,14 @@
 
           <ion-item>
             <ion-label>
-              Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+              Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
               consectetur adipiscing elit.
             </ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label class="ion-text-wrap">
-              Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+            <ion-label class="ion-text-nowrap">
+              Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
               consectetur adipiscing elit.
             </ion-label>
           </ion-item>
diff --git a/static/usage/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md
@@ -5,14 +5,14 @@
 
 <ion-item>
   <ion-label>
-    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
 
 <ion-item>
-  <ion-label class="ion-text-wrap">
-    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+  <ion-label class="ion-text-nowrap">
+    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md
@@ -11,14 +11,14 @@ function Example() {
 
       <IonItem>
         <IonLabel>
-          Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
           consectetur adipiscing elit.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
-          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+        <IonLabel class="ion-text-nowrap">
+          Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
           consectetur adipiscing elit.
         </IonLabel>
       </IonItem>
diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md
@@ -6,15 +6,15 @@
 
   <ion-item>
     <ion-label>
-      Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit.
+      Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit.
     </ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label class="ion-text-wrap">
-      Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit.
+    <ion-label class="ion-text-nowrap">
+      Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
     </ion-label>
   </ion-item>
 
diff --git a/static/usage/v8/item/basic/angular.md b/static/usage/v8/item/basic/angular.md
@@ -5,14 +5,14 @@
 
 <ion-item>
   <ion-label>
-    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
 
 <ion-item>
-  <ion-label class="ion-text-wrap">
-    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+  <ion-label class="ion-text-nowrap">
+    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
diff --git a/static/usage/v8/item/basic/demo.html b/static/usage/v8/item/basic/demo.html
@@ -26,14 +26,14 @@
 
           <ion-item>
             <ion-label>
-              Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+              Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
               consectetur adipiscing elit.
             </ion-label>
           </ion-item>
 
           <ion-item>
-            <ion-label class="ion-text-wrap">
-              Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+            <ion-label class="ion-text-nowrap">
+              Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
               consectetur adipiscing elit.
             </ion-label>
           </ion-item>
diff --git a/static/usage/v8/item/basic/javascript.md b/static/usage/v8/item/basic/javascript.md
@@ -5,14 +5,14 @@
 
 <ion-item>
   <ion-label>
-    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
 
 <ion-item>
-  <ion-label class="ion-text-wrap">
-    Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+  <ion-label class="ion-text-nowrap">
+    Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
     adipiscing elit.
   </ion-label>
 </ion-item>
diff --git a/static/usage/v8/item/basic/react.md b/static/usage/v8/item/basic/react.md
@@ -11,14 +11,14 @@ function Example() {
 
       <IonItem>
         <IonLabel>
-          Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
           consectetur adipiscing elit.
         </IonLabel>
       </IonItem>
 
       <IonItem>
-        <IonLabel class="ion-text-wrap">
-          Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+        <IonLabel class="ion-text-nowrap">
+          Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
           consectetur adipiscing elit.
         </IonLabel>
       </IonItem>
diff --git a/static/usage/v8/item/basic/vue.md b/static/usage/v8/item/basic/vue.md
@@ -6,15 +6,15 @@
 
   <ion-item>
     <ion-label>
-      Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
-      consectetur adipiscing elit.
+      Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit.
     </ion-label>
   </ion-item>
 
   <ion-item>
-    <ion-label class="ion-text-wrap">
-      Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur
-      adipiscing elit.
+    <ion-label class="ion-text-nowrap">
+      Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit.
     </ion-label>
   </ion-item>
 
diff --git a/versioned_docs/version-v7/api/item.md b/versioned_docs/version-v7/api/item.md
@@ -28,7 +28,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an
 
 ## Basic Usage
 
-Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
+Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text.
 
 import Basic from '@site/static/usage/v7/item/basic/index.md';
 
