时间戳

首页 > 解决方案 > 带有 Angular Header 工具栏的 Ionic 5 使用更长的标题自动扩展？

angular - 带有 Angular Header 工具栏的 Ionic 5 使用更长的标题自动扩展？

问题描述

我正在尝试使用 Angular 在 Ionic 5 中为应用程序构建一个注册页面。我创建了一个工具栏标题，标题为“救灾和协调应用程序”。但是标题太长，无法放在工具栏标题的一行上。有没有办法自动扩展工具栏以适应工具栏标题中另一行的标题溢出？

这是我当前的页面 html：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Disaster Relief and Coordination App</ion-title>
  </ion-toolbar>
</ion-header>

我还没有尝试过任何使用css的东西。任何解决此问题的建议将不胜感激。

我还附上了我正在谈论的问题的屏幕截图：问题的屏幕截图

标签： angularionic5

解决方案

可悲的是，没有办法做到这一点。文本显示在阴影元素中，如果您在浏览器中检查 DOM，您会看到如下内容：

<ion-title>
  #shadow-root (open)
  <div class="toolbar-title">Disaster Relief and Coordination App</div>
</ion-title>

而且你不能直接访问你的影子根元素。

我试过的：

将以下 CSS 添加到页面中：

.toolbar-title {
  white-space: normal;
  text-overflow: unset;
}

使用::part 伪选择器自定义阴影部分

在生命周期钩子中直接使用document.querySelector('.toolbar-title')和更改 CSS 。ngAfterContentInit()

但是您可以做一些不同的事情，您可以使用您的 on 元素和 CSS 重新创建相同的标题，但包装文本。而不是使用<ion-title>具有以下 HTML 的 try

<!-- html template -->
<div class="custom-title">a very long title that must be wraped</div>

然后在你的 CSS 中：

.custom-title {
  display: block;
  width: 100%;
  text-overflow: unset;
  overflow: unset;
  color: white;
  pointer-events: auto;
  font-weight: 200;
  padding: 0 10px;
}

这将创建您自己的标题，您只需将其设置为看起来像离子标题。但是有可能使用默认字体大小它可能会剪切您的文本，并且有两种方法可以解决这个问题：

在中.custom-title你可以设置一个较小的字体大小；

或者您可以使用以下 CSS 使您的工具栏更大：

ion-toolbar {
  --min-height: 80px; // here you'll give the height size needed to your toolbar
}

如果有人知道更改影子 DOM CSS 的方法，请添加到我的回复中。

推荐阅读