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

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

概述我一直在工具提示库中工作.这个想法很简单:在任何HTML元素中添加自定义数据属性(我的意思是数据),其中包含用户想要在工具提示中显示的消息,例如:<div data-msg='Message'>Hover me.</div> 当用户将鼠标悬停在元素上时,工具提示已显示它.这是一个Fiddle.如果您在上面的示例中看到,您将看到当用户添

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

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

这是一个Fiddle.

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

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

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

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

谢谢,
狮子座!最佳答案对我来说,通过添加工作

white-space: nowrap;

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

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

以上是内存溢出为你收集整理的HTML – 如果有空格,如何解决“单词切割”?全部内容,希望文章能够帮你解决HTML – 如果有空格,如何解决“单词切割”?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1121410.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)