Ionic 3 如何为工厂添加非包装标签答案

【问题标题】：Ionic 3 How to add a non-wrapping label to a fabIonic 3 如何为工厂添加非包装标签
【发布时间】：2020-02-19 22:18:41
【问题描述】：

我有一个带有标签的晶圆厂按钮的晶圆厂列表。

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

我的 HTML 代码是：

<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>

CSS

button[ion-fab] {
  overflow: visible;
  position: relative;

  ion-label {
    display: inline-block;
    position: absolute;

    top: -8px;
    left: 60px;

    color: white;
    background-color: rgba(0,0,0,0.7);
    line-height: 24px;
    padding: 4px 8px;
    border-radius: 4px;


    pointer-events: auto;
  }

  contain: layout;
}

但如果我没有指定宽度，标签会将文本换行。如果我这样做，标签不要根据标签的内容调整它们的宽度。

如何让标签内容不换行？

【问题讨论】：

参考此链接forum.ionicframework.com/t/fab-labels-in-ionic-4/139823/14

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

【解决方案1】：

问题源于

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

来自我的 app.scss

【讨论】：

【解决方案2】：

我在 ionic 3 中创建了一个演示。您可以查看它：

试试这个：

Stackblitz - Ionic 3 Fab button Demo Link

【讨论】：

@Chandrankant Devani 这正是我所做的。不工作。我会比较计算的样式。