Я работал в библиотеке всплывающих подсказок. Идея проста: добавьте в любой элемент HTML атрибут пользовательских данных (я имею в виду data-) с сообщением, которое пользователь хочет показать во всплывающей подсказке, например:

<div data-msg="Message">Hover me.</div>

Когда пользователь наводит указатель мыши на элемент, всплывающая подсказка показывает его.

Вот Fiddle .

Если вы видите в приведенном выше примере, вы увидите, что когда пользователь добавляет сообщение с пробелами, браузер вырезает слова в пробелах, но когда пользователь добавляет сообщение без пробелов, браузер не обрезает слова (потому что нет пробелов).

Я пытался решить проблему с white-space, break-word и text-overflow, но они не решают ее.

Это очень важно: я не хочу указывать конкретный width, поскольку браузер рассчитывает ширину элемента автоматически. Я мог бы решить эту проблему, добавив конкретный width, но я не хочу этого.

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

Спасибо, Лео!

5
leoMestizo 14 Июл 2013 в 01:52

1 ответ

Лучший ответ

Для меня это работает, добавляя

white-space: nowrap;

Через [data-msg]::before {}

Демо http://jsfiddle.net/QHD3A/

4
user1721135 14 Июл 2013 в 01:57
Ты жжешь! Я пробовал свойство white-space, но со следующими значениями: pre-wrap и pre-line . Значение nowrap мне не пришло. Я думал, что это свойство вместе с word-wrap: break-word будет вести себя странно. Большое спасибо!
 – 
leoMestizo
14 Июл 2013 в 02:04