如何在HTML工具提示中使用回车符？
Answers:
非常简单，您会踢自己...只需按Enter！
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefox完全不会显示多行工具提示-它将完全替换换行符。
\n，\u000A和\x0A。
\x0A（字节）是与换行符相对应的字符代码。对于\u000A（unicode）也是如此。\n也是换行符。
titleFirefox和Chrome 的属性中，而它们只是在工具提示中按字面意思显示。之后，我意识到您可能正在使用该语法作为传达应使用哪些字符（而非转义序列）的方式。我的评论是通过警告其他人不要尝试将您的转义序列放入他们的HTML中来节省他们的时间，以免他们像我一样浪费时间。
在最新的规范允许换行符，所以属性或实体内部的一个简单的换行符 （注意，字符#和;为必填项）都OK。
和 。 不会支持Chrome版本50.0.2661.94（64位）中的预期“换行符”。 在最新版本的chrome，firefox和Opera（均适用于64位Ubuntu）和Internet Explorer 11.0版本以及Windows上的某些更改中运行良好。
尝试使用字符10。但是，它在Firefox中将无法使用。:(
文本以浏览器相关的方式显示（如果有的话）。小工具提示可在大多数浏览器上使用。较长的工具提示和换行符在IE和Safari中有效（使用
或 换行）。Firefox和Opera不支持换行符。Firefox不支持较长的工具提示。
http://modp.com/wiki/htmltitletooltips
更新：
自2015年1月起，Firefox确实支持使用 来在HTML title属性中插入换行符。请参见下面的代码段示例。
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a> in title属性插入换行符。
<title>。有人在这方面取得了更大的成功吗？尝试了上面/下面提到的字符代码，似乎没有任何作用。
在IE，Chrome，Safari，Firefox（最新版本2012-11-27）中对此进行了测试：
适用于所有人
LF（一种跨协议和工具的标准换行符），CR仅由旧Mac（和其他晦涩的平台）使用，并且似乎不合适。
，尽管显然也 可以在许多情况下使用。
同样值得一提的是，如果要使用Javascript设置title属性，例如：
divElement.setAttribute("title", "Line one Line two");
它不会工作。您必须使用Java逸出方式将ASCII十进制10替换为ASCII十六进制A。像这样：
divElement.setAttribute("title", "Line one\x0ALine two");
\n无论如何都表示字符代码10）
如果您使用的是jQuery：
$(td).attr("title", "One \n Two \n Three");将工作。
在IE-9中测试：正常工作。
作为对
解决方案的贡献，	如果您需要执行以下操作，我们还可以将其用于制表符。
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>演示版
我知道我参加晚会很晚，但是对于那些只想看到此工作的人，这里有一个演示：http : //jsfiddle.net/rzea/vsp6840b/3/
使用的HTML：
<a href="#" title="First Line
Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Unordered list tooltip</a>我们有一个需要测试所有这些的要求，这是我希望分享的内容
document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
new
line</pre> Works in all browsers</p>
<hr/>
<p title="Tool Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>
<hr/>
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#xD;</code> May work in some browsers</p>
<hr/>
<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>
<p title="List:
• List item here
• Another list item here
• Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>
<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>
<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>
<hr/>在Chrome 79 上无法正常运行。
我成功完成了：
这适用于所有主要浏览器。
至于谁 不工作，则必须将可见线的元素设置为：white-space: pre-line;
从这个答案引用：https : //stackoverflow.com/a/17172412/1460591
a[title]吗？
只需使用此：
<a title='Tool
Tip
On
New
Line'>link with tip</a>您可以使用this在标题上添加新行
。
只需使用JavaScript。然后与大多数和较旧的浏览器兼容。对换行符使用转义序列\ n。
document.getElementById("ElementID").title = 'First Line text \n Second line text'
如果仅使用简单的title属性，则此方法应该起作用。
在自举弹出窗口上，只需data-html="true" 在data-content属性中使用html即可。
<div title="Hello 
World">hover here</div>从有关可访问性的信息以及使用提示或通过使用CR或换行符使其变得更大的工具提示的使用中得到赞赏，各种浏览器无法/不会在基础知识上达成共识这一事实表明，他们不太在意可访问性。
CDATA是文档字符集中的字符序列，并且可以包括字符实体。用户代理应按以下方式解释属性值：
- 用字符替换字符实体，
- 忽略换行，
- 用单个空格替换每个回车或卡舌。
这意味着（至少）CR和LF在title属性中不起作用。我建议您使用工具提示插件。这些插件大多数都允许将任意HTML显示为元素的工具提示。
可以手动创建好看的工具提示，并且可以包含HTML格式。
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more and then some">over</a> the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>
<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>
</body>
</html>这是从w3schools帖子上获得的。在这里尝试上面的代码。
hack但可以工作-（在chrome和移动设备上经过测试）
只是不添加任何空格，直到它断开为止-您可能必须根据内容的数量来限制工具提示的大小，但对于小文本消息来说，这是可行的：
etc尝试了以上所有内容，这是唯一对我有用的东西-
。然后在要换行的地方放置空格。您可能还需要 在空格之前添加一堆字符（换行符）。