Как предотвратить текстовый элемент обернуть

Question

Вот мой код:

<ion-list> 
    <ion-item> 
    <ion-avatar item-left> 
     <img src="img/avatar-small.jpg"> 
    </ion-avatar> 
    <h2>Alissa Connor said something</h2> 
    <p>Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit </p> 
    </ion-item> 
</ion-list> 

And what I get

я, возможно, использовать неправильный элемент, чтобы сделать это, но я хотел бы увидеть весь текст.

Любая идея?

Answer 1

Ионный имеет для этого предопределенный стиль. Используйте text-wrap на вашем ионным пункта (или класса item-text-wrap в ионическом 1):

<ion-list> 
    <ion-item text-wrap> 
    <ion-avatar item-left> 
     <img src="img/avatar-small.jpg"> 
    </ion-avatar> 
    <h2>Alissa Connor said something</h2> 
    <p>Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit Sed ut perspiciatis unde omnis iste natus error sit </p> 
    </ion-item> 
</ion-list> 

Answer 2

just provide some idea for this issue. i didn't test this. 

.word-wrap { 
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    -ms-word-break: break-all; 
    word-break: break-word; 
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto; 
    hyphens: auto; 
} 

<p class="word-wrap">Sed ut perspicia.....</p> 

Answer 3

Пробельные: Nowrap; в css на соответствующем классе.

Если вы хотите его обернуть, то пустое пространство: оберните;

Но если это может быть ваш контейнер div, который отключает его, потому что слишком много слов со слишком большим размером шрифта, чтобы соответствовать всему тексту на одной строке. Вам нужно либо сделать контейнер больше для текста, либо вам придется обернуть текст.