Ionic 3 Как добавить в упаковку ярлык без упаковки

Question

У меня есть список потрясающих кнопок с потрясающими кнопками, которые должны иметь метки.

Я нашел Оригинальные ярлыки с метками в Ionic 3 & Какой правильный способ вставки метки в IonicСписок FAB .

Мой 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;
}

Но метки разбивают текст на новую строку, если я этого не сделаюуказать ширину. Если я делаю ярлыки, не меняйте их ширину в соответствии с содержимым ярлыка.

Как сделать так, чтобы содержимое ярлыка не переносилось на новую строку?

Answer 1

Проблема возникла из

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

из моего app.scss

Answer 2

У меня есть демо-версия на ionic 3. Вы можете проверить это:

Попробуйте:

Stackblitz - Ionic 3 Fab button Demo Link