Как я могу предотвратить усечение текста matTooltip? - PullRequest
Новая
       31

Как я могу предотвратить усечение текста matTooltip?

1 голос
/ 08 мая 2019

У меня есть страница, которая отображает имя хоста. Имя хоста может содержать до 63 символов без пробелов. Мы усекаем текст в пользовательском интерфейсе. Но когда пользователь наводит курсор на усеченный текст, нам нужна всплывающая подсказка, которая сообщает пользователю полное имя хоста.

https://stackblitz.com/edit/truncatedtooltips?file=app%2Ftooltip-overview-example.html

У меня есть этот образец страницы на StackBlitz. В образце есть две кнопки, обе с длинным текстом. Разница в том, что у одного есть пробелы, а у другого нет.

Подсказка, содержащая пробелы, не усекается, но, к сожалению, подсказка, в которой не хватает пробелов, усекается. Имена хостов не имеют пробелов, поэтому подсказки не работают так, как задумано в этом ситуация.

Может кто-нибудь сообщить мне, что делать с подсказкой, в которой нет пробелов?

Спасибо.

1 Ответ

1 голос
/ 08 мая 2019

Усечение происходит с помощью CSS. Вы можете переопределить этот CSS следующим образом: 

.example-tooltip-red1 {
  word-break: break-all !important;
  white-space: normal !important;
}

Вот ваш оригинальный пример с обновленным CSS .

Примечание: Я поместил CSS в style.css и использовал ключевое слово !important, потому что я не уверен, как работает каскад в приложениях Angular. Возможно, вы захотите избежать ключевого слова !important и поместить CSS в более подходящее место.

...