Ionic 3如何为晶圆厂添加非包装标签

时间:2019-10-23 15:50:59

标签: css ionic-framework ionic3 floating-action-button

我有一个带有fab按钮的fab列表,其中应该有标签。

我找到了Fabs With Labels In Ionic 3whats the correct way of inserting label in an Ionic FAB list

我的HTML代码是:

add

CSS

<ion-fab left top>
    <button ion-fab color="light">
      <ion-icon name="menu"></ion-icon>
    </button>

    <ion-fab-list side="bottom">

      <button ion-fab>
        <ion-icon name="person"></ion-icon>
        <ion-label>Test Test Test</ion-label>
      </button>


      <button ion-fab>
        <ion-icon name="alarm"></ion-icon>
        <ion-label>Bla Bla</ion-label>
      </button>

    </ion-fab-list>

  </ion-fab>

但是,如果我不指定宽度,标签会将文本中断到换行符。 如果我这样做,则标签不要根据标签内容调整其宽度。

enter image description here

如何使标签内容不换行?

2 个答案:

答案 0 :(得分:1)

问题源自

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

来自我的app.scss

答案 1 :(得分:0)

我已经在ionic 3中创建了一个演示。您可以检查它:

尝试一下:

Stackblitz - Ionic 3 Fab button Demo Link