Как обрезать текст добавив ... в конце, и при наведении мышью отобразить полный текст в всплывающем сообщении?

Question

[Mdmitr]

Как обрезать текст добавив ... в конце, и при наведении мышью на текст отобразить полный текст в всплывающем сообщении ( если текст обрезан ) ? Текст много строчный.
Сайт на React js.

Comments

[Дмитрий]

Обрезать по словам?

[Mdmitr]

Дмитрий, можно по словам или по количеству строк

Answer 1

[Дмитрий]

Если не обязательно по словам, то можно с помощью стилей

div.text {
   width: 200px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

Как сделать подсказку в интернете огромное количество примеров

Comments

[Mdmitr]

Обрезать текст вообще не проблема

Как при наведении мышью на текст отобразить полный текст в всплывающем сообщении ( если текст обрезан ) ?

[Дмитрий]

Поищите в гугле поиском tooltip(всплывающая подсказка) - огромное количество примеров и готовых библиотек как это сделать

[Mdmitr]

Дмитрий, если бы я нашел то я бы тут не спрашивал. Есть на бустрап но мне не подходит

[Дмитрий]

Mdmitr, Первая же ссылка на простую подсказку без бутстрапа
www.css-tricks.ru/articles/css/easy-css-tooltip#

[Mdmitr]

Дмитрий, сайт на React js а подсказка нужна только в том случае если текст обрезан

[Дмитрий]

Mdmitr, А, понял. Как вариант: определить обрезался ли текст можно сравнением свойств ScrollWidth и ClientWidth. Если разные значит обрезался. Соответственно в реакте в DidMount проверить это и установить hidden элементу подсказки, если обрезался. Вроде должно сработать.

[Mdmitr]

Дмитрий, нет, менять функциональные компоненты на классы во всем проекте будет глупым решением

[Антон Спирин]

Mdmitr,

менять функциональные компоненты на классы во всем проекте будет глупым решением

Решение не глупое, вам просто надо попробовать подумать, как внедрить необходимый функционал не изменяя родительские компоненты.

[Дмитрий]

Mdmitr, Другой вариант запускать промис, который через энное количество милисекунд будет проверять вашу надпись и менять состояние компонента, в котором находится тултип

[Robur]

Mdmitr, сделайте HOC который будет показывать подсказку. Изменения будут минимальные. Если у вас все такое прямо функциональное и модно-молодежное - можно на хуках, useEffect вам в помощь.

[Александр]

Mdmitr, для подсказки можно использовать html атрибут title, подставив его в нужный элемент с полным текстом.