如何在HTML工具提示中添加换行符?
我尝试在工具提示中使用<br/>和\n，如下所示:
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
然而，这是无用的，我可以在工具提示中看到文字<br/>和\n。任何建议都会很有帮助。
当前回答
AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:
Uib-tooltip, Uib-tooltip -template和Uib-tooltip -html
- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template
在我的情况下，我选择了uib-tooltip-html，有三个部分:
配置 控制器 超文本标记语言
例子:
(function(angular) {
//Step 1: configure $sceProvider - this allows the configuration of $sce service.
angular.module('myApp', ['uib.bootstrap'])
.config(function($sceProvider) {
$sceProvider.enabled(false);
});
//Step 2: Set the tooltip content in the controller
angular.module('myApp')
.controller('myController', myController);
myController.$inject = ['$sce'];
function myController($sce) {
var vm = this;
vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
'I am the second line-break');
return vm;
}
})(window.angular);
//Step 3: Use the tooltip in HTML (UI)
<div ng-controller="myController as get">
<span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>
更多信息请点击这里
其他回答
在原生HTML工具提示中添加换行符是可能的，只需将标题属性分布在多行中即可。
但是，我建议使用jQuery工具提示插件，如Q-Tip: http://craigsworks.com/projects/qtip/。
它的设置和使用都很简单。另外，也有很多免费的javascript工具提示插件。
编辑:第一个语句的更正。
只需在脚本中添加以下代码片段:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
当然如上所述，data-html的答案应该是“真”。这将允许您在title属性的值内使用html标记和格式。
只需添加data-html="true"
<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
使用.html()而不是.text()对我来说很有效。例如
.html("This is a first line." + "<br/>" + "This is a second line.")
javascript版本
因为& # 013;(html)是0D(十六进制)，这可以表示为'\u000d'
str = str.replace(/\n/g, '\u000d');
此外,
与大家分享一个AngularJS过滤器，它将\n替换为该字符，这要感谢其他答案中的引用
app.filter('titleLineBreaker', function () {
return function (str) {
if (!str) {
return str;
}
return str.replace(/\n/g, '\u000d');
};
});
使用
<div title="{{ message | titleLineBreaker }}"> </div>
