如何防止项目文本换

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

Ionic有一个预定义的风格。您离子项目（或item-text-wrap类离子1）使用text-wrap：

<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上适当的类。

如果你想要它包装，然后white-space：wrap;

但是，如果它也可能是您的div容器被切断，因为太多的字，太大的字体大小以适合一行上的所有文本。您必须使文本的容器更大以适合文本，否则您将不得不包装文本。