How to solve "words-cut" when there's spaces?

Question

I've been working in a tooltip library. The idea is simple: Add in any HTML element the custom data attribute (I mean data-) with the message that the user wants to show in the tooltip, for example:

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

When the user hover the mouse on the element, the tooltip has show it.

Here's a Fiddle.

If you see in the above example, you'll see that when the user adds a message with spaces the browser cut the words in the spaces, but when the user adds a message without spaces, the browser don't cut the words (because there is no spaces).

I've been trying to fix the problem with white-space, break-word and text-overflow, but they don't resolve it.

This is very important: I don't want to put a specific width, for leave that the browser calculates the element's width automatically. I could fix this problem adding a specific width but I don't want that.

If anyone know how fix this problem, I'd like to explain me the behavior of this issue.

Thanks, Leo!

Answer 1

For me it works by adding

white-space: nowrap;

in [data-msg]::before {}

Demo http://jsfiddle.net/QHD3A/