Html 在工具提示中添加换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3340802/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add line break within tooltips
提问by Aakash Chakravarthy
How can line breaks be added within a HTML tooltip?
如何在 HTML 工具提示中添加换行符？
I tried using <br/>and \nwithin the tooltip as follows:
我尝试在工具提示中使用<br/>和\n，如下所示：
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
However, this was useless and I could see the literal text <br/>and \nwithin the tooltip. Any suggestions will be helpful.
然而，这是无用的，我可以看到文字<br/>和\n工具提示。任何建议都会有所帮助。
回答by Fred Senese
Just use the entity code 
for a linebreak in a title attribute.
只需
在标题属性中使用实体代码作为换行符。
回答by siwalikm
Just add a data attribute
只需添加一个数据属性
data-html="true"
数据-html =“真”
and you're good to go.
你可以走了。
Eg. usage:
例如。用法：
<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow" </i>
It has worked in majority of the tooltip plugins i have tried as of now.
到目前为止，它在我尝试过的大多数工具提示插件中都有效。
回答by GuitarWorker
The 
combined with the style white-space: pre-line;worked for me.
在
与风格相结合的白色空间：前行; 为我工作。
回答by Dan
This CSS is what finally worked for me in conjunction with a linefeed in my editor:
这个 CSS 最终与我的编辑器中的换行符一起对我有用：
.tooltip-inner {
white-space: pre-wrap;
}
Found here: How to make Twitter bootstrap tooltips have multiple lines?
在这里找到： 如何使 Twitter 引导工具提示具有多行？
回答by Priyanka Thakur
Give \nbetween the text. It work on all browsers.
给\n之间的文本。它适用于所有浏览器。
Example
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";
This will work for me and it's used in code behind.
这对我有用，并且在后面的代码中使用。
Hope this will work for you
希望这对你有用
回答by klausf
\n
with the styling
与造型
.tooltip-inner {
white-space: pre-line;
}
worked for me.
为我工作。
回答by Jossef Harush
The javascript version
javascript 版本
Since 
(html) is 0D(hex), this can be represented as '\u000d'
由于
(html) 是0D(hex)，这可以表示为'\u000d'
str = str.replace(/\n/g, '\u000d');
In addition,
此外，
Sharing with you guys an AngularJS filterthat replaces \nwith that character thanks to the references in the other answers
由于其他答案中的引用，与你们分享一个AngularJS 过滤器，该过滤器替换\n为该字符
app.filter('titleLineBreaker', function () {
return function (str) {
if (!str) {
return str;
}
return str.replace(/\n/g, '\u000d');
};
});
usage
用法
<div title="{{ message | titleLineBreaker }}"> </div>
回答by Aakash Chakravarthy
I found it. It can be done by simply doing like this
我找到了。它可以通过简单地这样做来完成
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
回答by Dhanushka
just use \n in title and add this css
只需在标题中使用 \n 并添加此 css
.tooltip-inner {
white-space: pre-wrap;
}
回答by Babo Darbinyan
Just add data-html="true"
只需添加 data-html="true"
<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
