如果文本長於容器，如何使文本分成新行

Question

我在離子卡上有一行文字，每次都會有不同的長度。 我需要能夠告訴文本何時到達卡的末尾（在ios和android上 - 可以有一個更小的屏幕），所以我可以把它分成一個新行。

這就是卡片的樣子：

<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>

更新我嘗試了第一個答案建議，並將斷字溢出包裝添加到css但它不起作用。 我還需要幫忙。

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

    }

Answer 1

也許你應該使用css作為展示用品：

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

overflow-wrap：break-word;

Answer 2

您的內容將自動包裝到ion-label 。 這個元素有默認的css是： white-space: nowrap 。 你需要覆蓋它：

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

Answer 3

<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>

在“ion-card”標簽內，放入此代碼並嘗試運行。 它會將您的文本限制在該特定區域。

Answer 4

Ionic有一個CSS實用程序text-wrap ： https ： //ionicframework.com/docs/theming/css-utilities/

從而：

<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>