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

ionic-team · Dec 11, 2023 · 5f3034a · 5f3034a · vercel · Dec 11, 2023
1 parent 1dbb624
commit 5f3034a
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
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/v7/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>