ionic 4-如何在离子头中将长字符串自动换行

Question

大家好！

我正忙于在新发布的Ionic版本（即Ionic 4）中构建应用程序。我正在努力做一些应该很容易的事情，但我没有运气。

我试图防止标题太长而无法在一行中显示时切断标题。

我在这里找到了几篇有关该主题的文章，但没有专门针对Ionic 4的。似乎不适用于旧版本的解决方案都无法解决我的问题。其中两个如下：

ionic - How to wordwrap a long string in ion-header

How to wordwrap a long string in ion-item

我很乐意向您展示一些类似的东西，以进一步说明我的问题，但是我也在努力寻找一个在线工具，该工具可用于Ionic 4。

还有没有其他人以前曾经解决过这个问题？任何建议将不胜感激。

Answer 1

我设法使用元素4内的跨度并使用以下CSS来使离子4元素强制文本变形：

<ion-header>
<span class="wrap-text">Supercalifragilisticexpialidocious if you say it loud enough you'll always sound precocious</span>
</ion-header>

.wrap-text {
  overflow: visible;
  text-overflow: unset;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}