コンテナより長い場合に改行を改行する方法

Question

イオンカードには毎回さまざまな長さのテキストがあります。 テキストがカードの終わりに達したとき（iOSとアンドロイドの両方で - さらに小さな画面を持つことができる）を知る必要があるので、新しい行に分割することができます。

<ion-card> 
     <ion-item> 

      <p><i>On:</i><span id="showName">{{event.showName}}</span></p> 

      <p><i>At:</i><span id="venueName">{{event.venue}}</span></p> 

     </ion-item> 
<ion-card> 

UPDATE 私は最初の回答の提案を試してみましたが、CSSにブレークワードオーバーフローラップを追加しましたが、それはうまくいきませんでした：

これはカードがどのように見えるかです。私はまだヘルが必要です。

#showName{ 
    display: inline; 
    overflow-wrap: break-word; 
    font-size: 2rem; 
    font-weight: 800; 
    word-spacing: -2px 

    } 

Answer 1

<ion-grid> 
    <ion-row> 
    <ion-col col-12> 
     <ion-item> 
     <p><i>On:</i><span id="showName">{{event.showName}}</span></p> 
     <p><i>At:</i><span id="venueName">{{event.venue}}</span></p> 
     </ion-item> 
    </ion-col> 
    </ion-row> 
</ion-grid> 

：したがってhttps://ionicframework.com/docs/theming/css-utilities/

：

.label{ 
    white-space: normal !important; 
} 

Answer 2

たぶん、あなたが表示purpousesのため、CSSを使用する必要があります。

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

オーバーフローラップ：ブレークワードを。

Answer 3

コンテンツは自動的にion-labelにラップされます。この要素のデフォルトのCSSはwhite-space: nowrapです。あなたはそれをオーバライドする必要があります。このコードを入れてみてください、 "イオンカード" タグの中

<ion-card> 
    <ion-item> 
    <p text-wrap><i>On:</i><span id="showName">{{event.showName}}</span></p> 
    <p text-wrap><i>At:</i><span id="venueName">{{event.venue}}</span></p> 
    </ion-item> 
<ion-card> 

Answer 4

イオンは、CSSユーティリティtext-wrapを持っています走る。それはあなたのテキストをその特定の領域だけに制限します。