如何在 HTML 工具提示中使用回车符？

How can I use a carriage return in a HTML tooltip?

提问by penderi

I'm currently adding verbose tooltips to our site, and I'd like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip.

我目前正在向我们的网站添加详细的工具提示，我希望（无需求助于 jQuery 插件，我知道有很多！）使用回车来格式化工具提示。

To add the tip I'm using the titleattribute. I've looked around the usual sites and using the basic template of:

要添加提示，我正在使用该title属性。我环顾了常用网站并使用了以下基本模板：

<a title='Tool?Tip?On?New?Line'>link with tip</a>

I've tried replacing the ?with:

我试过替换为?：

• <br />
• &013; / 

• \r\n
• Environment.NewLine(I'm using C#)

• <br />
• &013; / 

• \r\n
• Environment.NewLine（我正在使用 C#）

None of the above works. Is it possible?

以上都不起作用。是否可以？

采纳答案by Greg

It's so simple you'll kick yourself... just press enter!

很简单，你会踢自己...只需按回车键！

<a title='Tool
Tip
On
New
Line'>link with tip</a>

Firefox won't display multi-line tooltips at all though - it will replace the newlines with nothing.

Firefox 根本不会显示多行工具提示 - 它会用空替换换行符。

回答by Kornel

The latest specificationallows line feed character, so a simple line break inside the attribute or entity 
(note that characters #and ;are required) are OK.

在最新的规范允许换行符，所以属性或实体内部的一个简单的换行符
（注意，字符#和;为必填项）都OK。

回答by Stefan Mai

Try character 10. It won't work in Firefox though. :(

试试字符 10。不过它在 Firefox 中不起作用。:(

The text is displayed (if at all) in a browser dependent manner. Small tooltips work on most browsers. Long tooltips and line breaking work in IE and Safari (use 
or 
for a new newline). Firefox and Opera do not support newlines. Firefox does not support long tooltips.

文本以依赖于浏览器的方式显示（如果有的话）。小工具提示适用于大多数浏览器。长工具提示和换行在 IE 和 Safari 中工作（使用
或
换行）。Firefox 和 Opera 不支持换行。Firefox 不支持长工具提示。

http://modp.com/wiki/htmltitletooltips

http://modp.com/wiki/htmltitletooltips

Update:

更新：

As of January 2015 Firefox does support using 
to insert a line break in an HTML titleattribute. See the snippet example below.

截至 2015 年 1 月，Firefox 确实支持使用
在 HTMLtitle属性中插入换行符。请参阅下面的代码片段示例。

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

回答by Morten Repsdorph Husfeldt

Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):



在 IE、Chrome、Safari、Firefox（最新版本 2012-11-27）中对此进行了测试：



Works in all of them...

在所有这些工作...

回答by cprcrack

Also worth mentioning, if you are setting the title attribute with Javascript like this:

还值得一提的是，如果您像这样使用 Javascript 设置 title 属性：

divElement.setAttribute("title", "Line one
Line two");

divElement.setAttribute("title", "Line one
Line two");

It won't work. You have to replace that ASCII decimal 10 to a ASCII hexadecimal A in the way it's escaped with Javascript. Like this:

它不会工作。您必须以使用 Javascript 转义的方式将该 ASCII 十进制 10 替换为 ASCII 十六进制 A。像这样：

divElement.setAttribute("title", "Line one\x0ALine two");

divElement.setAttribute("title", "Line one\x0ALine two");

回答by amurra

As of Firefox 12 they now support line breaks using the line feed HTML entity: 


从 Firefox 12 开始，它们现在支持使用换行 HTML 实体换行： 


<span title="First line&#10;Second line">Test</span>

This works in IE and is the correct according to the HTML5 spec for the title attribute.

这适用于 IE 并且根据标题属性的 HTML5 规范是正确的。

回答by Anil Bharadia

If you are using jQuery :

如果您使用的是 jQuery：

$(td).attr("title", "One \n Two \n Three");

will work.

将工作。

tested in IE-9 : working.

在 IE-9 中测试：工作。

回答by Juan Cortés

As a contribution to the 
solution, we can also use &#009for tabs if you ever need to do something like this.

作为对
解决方案的贡献，&#009如果您需要执行此类操作，我们还可以使用选项卡。

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

Demo

演示

回答by Greg Dean


will work on all majors browsers (IE included)


将适用于所有主要浏览器（包括 IE）

回答by Ricardo Zea

I know I'm late to the party, but for those that just want to see this working, here's a demo: http://jsfiddle.net/rzea/vsp6840b/3/

我知道我迟到了，但对于那些只想看到这个工作的人，这里有一个演示：http: //jsfiddle.net/rzea/vsp6840b/3/

HTML used:

使用的 HTML：

<a href="#" title="First Line&#013;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>