ionic 4 - 如何在 ion-header 中对长字符串进行自动换行

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

我已经设法使用元素内部的 span 并使用以下 CSS 来强制使用 Ionic 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;
}