如果文本比容器长，如何使文本换行答案

【问题标题】：How to make text break into new line if it's longer than container如果文本比容器长，如何使文本换行
【发布时间】：2017-10-02 15:32:03
【问题描述】：

我在离子卡上有一行文字，每次都会有不同的长度。我需要能够判断文本何时到达卡片的末尾（在 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

    }

【问题讨论】：

标签： javascript typescript ionic2 angular2-template

【解决方案1】：

您的内容将自动包装到ion-label。此元素的默认 css 为：white-space: nowrap。你需要覆盖它：

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

【讨论】：

【解决方案2】：

<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”标签内，放置这段代码并尝试运行。它只会将您的文本限制在该特定区域。

【讨论】：

【解决方案3】：

也许你应该使用 css，用于显示目的：

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

溢出换行：断字；

【讨论】：

【解决方案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>

【讨论】：