jQueryUI 工具提示 - 没有空格的文本与工具提示容器重叠
jQueryUI Tooltip - Text without spaces overlaps tooltip container
我的 Web 应用程序中有一个页面,其中包含许多控件,悬停时会显示 jQueryUI
工具提示。这对于包含带空格的标准文本的工具提示非常有用。
但是,当工具提示文本不包含空格时,例如文件路径或数据库字段名称,文本会与工具提示容器重叠。
我怎样才能像标准工具提示那样强制文本换行?
提前致谢。
代码
$('.jQueryTooltip').tooltip();
<p>
<span title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">Standard tooltip with spaces</span>
</p>
<p>
<span title="Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat">Standard tooltip without spaces</span>
</p>
<p>
<span class="jQueryTooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">jQuery tooltip with spaces</span>
</p>
<p>
<span class="jQueryTooltip" title="Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat">jQuery tooltip with spaces</span>
</p>
你可以使用这种风格:
.ui-tooltip {
word-wrap: break-word;
}
我的 Web 应用程序中有一个页面,其中包含许多控件,悬停时会显示 jQueryUI
工具提示。这对于包含带空格的标准文本的工具提示非常有用。
但是,当工具提示文本不包含空格时,例如文件路径或数据库字段名称,文本会与工具提示容器重叠。
我怎样才能像标准工具提示那样强制文本换行?
提前致谢。
代码
$('.jQueryTooltip').tooltip();
<p>
<span title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">Standard tooltip with spaces</span>
</p>
<p>
<span title="Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat">Standard tooltip without spaces</span>
</p>
<p>
<span class="jQueryTooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.">jQuery tooltip with spaces</span>
</p>
<p>
<span class="jQueryTooltip" title="Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat">jQuery tooltip with spaces</span>
</p>
你可以使用这种风格:
.ui-tooltip {
word-wrap: break-word;
}