Как решить «вырезать слова», когда есть пробелы?

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

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

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

Вот Fiddle .

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

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

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

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

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