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

css, html

Solution

For me it works by adding

white-space: nowrap;

in `[data-msg]::before {}`

Demo http://jsfiddle.net/QHD3A/

Problem

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!

Original source