配置ion-title元素以支持多行。

huangapple
go评论58阅读模式
英文:

Configure ion-title element to support multiple lines

问题

我想要ion-title元素能够显示多行，我尝试了一切但没有成功。white-space属性似乎不起作用。

应该如何正确实现这一点？

这里是我正在尝试的示例：https://stackblitz.com/edit/angular-uyq4qa?file=src%2Fapp%2Fexample.component.html

<ion-header translucent="true" class="ion-no-border">
  <ion-toolbar color="">
    <ion-buttons slot="primary" class="ion-button">
      <ion-button>
        <ion-icon slot="icon-only" name="contrast"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">
        长文本，包括多行，Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. In ac felis velit. Nulla accumsan velit ipsum, tempus
        euismod orci porta a. Ut lacus augue, sodales at auctor sed, vulputate
        et tellus.
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <div class="ion-padding">滚动列表以查看标题折叠。</div>

  ...
</ion-content>
英文:

I want the ion-title element to be able to display multiple lines, I've tried everything without any success. The white-space property doesn't seem to work

What would be the correct way to do this?

Here an example of what I'm trying https://stackblitz.com/edit/angular-uyq4qa?file=src%2Fapp%2Fexample.component.html

&lt;ion-header translucent=&quot;true&quot; class=&quot;ion-no-border&quot;&gt;
  &lt;ion-toolbar color=&quot;&quot;&gt;
    &lt;ion-buttons slot=&quot;primary&quot; class=&quot;ion-button&quot;&gt;
      &lt;ion-button&gt;
        &lt;ion-icon slot=&quot;icon-only&quot; name=&quot;contrast&quot;&gt;&lt;/ion-icon&gt;
      &lt;/ion-button&gt;
    &lt;/ion-buttons&gt;
  &lt;/ion-toolbar&gt;
&lt;/ion-header&gt;

&lt;ion-content fullscreen=&quot;true&quot;&gt;
  &lt;ion-header collapse=&quot;condense&quot;&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title size=&quot;large&quot;&gt;
        Long text with multiple lines, Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. In ac felis velit. Nulla accumsan velit ipsum, tempus
        euismod orci porta a. Ut lacus augue, sodales at auctor sed, vulputate
        et tellus.
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;

  &lt;div class=&quot;ion-padding&quot;&gt;Scroll the list to see the title collapse.&lt;/div&gt;

  ...
&lt;/ion-content&gt;

答案1

得分: 1

ion-title 不应该用于长文本。您应该使用p或span标签，并使用CSS进行样式设置。

或者使用&lt;ion-label&gt;或&lt;ion-text&gt;。

英文:

ion-title is not supposed to be used with long text. You should use the p or span tags and use css to style.

or use &lt;ion-label&gt; or &lt;ion-text&gt;

huangapple
  • 本文由 发表于 2023年3月23日 12:47:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/75819337.html
  • css
  • ionic-framework
  • ionic6
  • whitespace
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定