javascript - 如果文本比容器长，如何使文本换行

我在离子卡上有一排文字，每次都会有不同的长度。
我需要能够知道文本何时到达卡的末尾（在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中，但是没有用。我仍然需要Hel。

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

    }

最佳答案

<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”标签中，放置此代码并尝试运行。它将仅将文本限制在该特定区域。