Mattooltip: Как я могу сделать так, чтобы поле соответствовало тексту?

Question

У меня есть этот текст, который я хочу отобразить как всплывающую подсказку. Без стиля (только размер шрифта, определенный как 16px) это выглядит так:

На самом деле я хочу, чтобы текст отображался в одной строке - поэтому я установил пробел в pre в css:

::ng-deep .mat-tooltip {
  font-size: 16px;
  white-space: pre;
}

Но теперь текст выходит за рамки всплывающей подсказки:

Я попытался установить ширину на более высокое значение px, но это ничего не дало.

Есть ли способ сделать так, чтобы рамка соответствовала тексту?

[EDIT - добавлен отсутствующий пример, как было указано в комментариях] : ссылка на стек
Текст в примере не покидает прямоугольник, а сокращается вместо прямоугольника, помещающегося вокруг всего текста, хотя я установил ширину 400px.

Answer 1

Просто установите максимальную ширину на unset. Для этого определите глобальный класс CSS следующим образом:

.my-custom-tooltip {
  max-width: unset !important;
}

Затем передайте имя класса во всплывающую подсказку:

<button mat-raised-button
        matTooltip="This Infotext is displayed one line if possible. Just a little more text for demo!"
        matTooltipClass="my-custom-tooltip">
  Action
</button>

Также, как упоминалось @ rinktacular , старайтесь не использовать ng::deep.

Пример работы Stackblitz: https://stackblitz.com/edit/angular-qkh4cl