HTML – 如果有空格,如何解决“单词切割”?

我一直在工具提示库中工作.这个想法很简单:在任何HTML元素中添加自定义数据属性(我的意思是数据),其中包含用户想要在工具提示显示的消息,例如:

用户将鼠标悬停在元素上时,工具提示显示它.

这是一个Fiddle.

如果您在上面的示例中看到,您将看到当用户添加带空格的消息时,浏览器会剪切空格中的单词,但是当用户添加没有空格的消息时,浏览器不会剪切单词(因为没有空间).

我一直试图解决白色空间,断字和文本溢出问题,但他们没有解决它.

这非常重要:我不想放一个特定的宽度,因为浏览器会自动计算元素的宽度.我可以解决这个问题,添加一个特定的宽度,但我不希望这样.

如果有人知道如何解决这个问题,我想向我解释这个问题的行为.

谢谢,
狮子座!

最佳答案
对我来说,通过添加工作

white-space: Nowrap;

在[data-msg] :: before {}之前

演示http://jsfiddle.net/QHD3A/

相关文章

vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些