今天在使用引导的工具提示功能时遇到2个小问题:换行丢失,文字不是左对齐。然后经过百度和Bing找到了解决方案。
先看一下引导中展示工具提示的代码:
& lt;链接的href=" https://www.yisu.com/zixun/bootstrap/css/bootstrap.min.css " rel=巴獠縩ofollow”rel="样式表" type=" text/css "/比;
& lt;脚本src=" https://www.yisu.com/zixun/res/jquery.min.js " type=" text/javascript祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/bootstrap/js/bootstrap.min.js " type=" text/javascript祝辞& lt;/script>
& lt; script>
$(函数(){
$ (“[data-toggle="提示"]”).tooltip ();
}）;
& lt;/script>
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-default data-toggle=数据放置“提示”=白蟆眛itle=" $ {desc}”和gt; ${标题}& lt;/button>
注意这里<代码> $ {desc}和${标题}是SpringMVC后台传过来的数据。
这是引导提示最基本的代码,也就是会出现我说的两个问题。
遇到换行,我们首先想到的是将“\ n”替换成“& lt; br/比”,我也是这么做的,可惜这在工具提示中不管用.Tooltip直接把“& lt; br/祝辞;“当作文字显示出来了。
也就是说,HTML在工具提示中没有起作用。好在我找到了data-html属性,可以使得在工具提示中使用HTML,让“& lt; br/祝辞”起作用。加上data-html=" true "后换行起作用了,看如下代码:
& lt;按钮类型=鞍磁ァ崩?癰tn btn-default”data-html=" true " data-toggle=数据放置“提示”=白蟆眛itle=" $ {fn:替换(desc、换行符”,lt; br/和gt;”)}”和gt; ${标题}& lt;/button>
基于HTML起作用后,再做左对齐就简单多了,将要显示的内容放在& lt; p align=蟆４恰? lt;/p>中。
& lt;按钮类型=鞍磁ァ崩?癰tn btn-default”data-html=" true " data-toggle=数据放置“提示”=白蟆眛itle=? lt; p align=蟆脑? {fn:替换(desc、换行符”,lt; br/和gt;”)}, lt;/p& gt;”, gt; ${标题}& lt;/button>
无论什么原因,如果& lt; p align=蟆脑诓还苡?还有很多选择:
& lt; style>
.tooltip祝辞p {
text-align:左;
}
& lt;/style>
.tooltip-inner {
text-align:左;
}
以上所述是小编给大家介绍的引导提示显示换行和左对齐的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
