css - 工具提示覆盖在容器组件上

标签 css

出现错误时,我有一个带有工具提示图标的组件。 当工具提示的文本包含一个大字(没有空格)时,问题就开始了。

在这种情况下,工具提示框内的文本会超出边框。

请看这个沙盒: https://codesandbox.io/s/fragrant-morning-267l5

最佳答案

默认情况下,如果单词足够长以至于在同一行上没有剩余空间,则单词会在新行上换行。由于您输入的是一个长词,因此它无法找到一个新词来打断,因此它会越过方框。

你可以做的是打破一个你可以打破一个字母的单词

word-wrap: break-word;

将该 CSS 添加到文本。当新字母的空间用完时,它将转到下一行。

阅读更多相关信息 here

希望这有帮助:)

关于css - 工具提示覆盖在容器组件上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59124916/

相关文章:

html - 在页面底部居中对齐文本

javascript - 如果选中某些复选框,如何禁用其余可用复选框

Javascript:在具有淡入淡出效果的循环中更改<img>

jquery - 造型 Owl Carousel 视频

jquery - 悬停拇指 css 上的中心图像

javascript - Twitter Bootstrap 日期时间选择器未在模式中正确显示

html - CSS 网格重复、动态、水平 div 元素

javascript - 在水平滚动页面的某个点停止

css - 为什么 flex 元素内缩放图像的实际宽度会影响元素的宽度?

javascript - 位置 : fixed, 没有按预期工作