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

Question

我现在正在向我们的网站添加详细的工具提示,我想(不必诉诸于一个whiz-bang jQuery插件,我知道有很多!)使用回车来格式化工具提示.

要添加提示,我正在使用该title属性.我查看了常用网站并使用以下基本模板:

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

我试过更换?:

• <br />
• &013; / 

• \r\n
• Environment.NewLine (我正在使用C#)

以上都不是.可能吗？

Answer 1

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

Answer 2

这很简单,你会踢自己...只需按回车即可!

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

Firefox根本不会显示多行工具提示 - 它将无需替换换行符.

Answer 3

尝试使用角色10.虽然它不适用于Firefox.:(

以浏览器相关的方式显示文本(如果有的话).小工具提示适用于大多数浏览器.IE和Safari中的长工具提示和换行工作(使用
或
换行换行).Firefox和Opera不支持换行.Firefox不支持长工具提示.

http://modp.com/wiki/htmltitletooltips

更新:

截至2015年1月,Firefox支持使用
在HTML title属性中插入换行符.请参阅下面的代码段示例.

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

Answer 4

在IE,Chrome,Safari,Firefox中测试过(最新版本2012-11-27):



适用于所有这些......

Answer 5

另外值得一提的是,如果你用这样的Javascript设置title属性:

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

它不会起作用.您必须将ASCII十进制10替换为ASCII十六进制A,其方式是使用Javascript进行转义.像这样:

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

Answer 6

从Firefox 12开始,他们现在支持使用换行HTML实体的换行符: 


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

这适用于IE,并且根据title属性的HTML5规范是正确的.

Answer 7

如果你使用jQuery:

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

将工作.

在IE-9中测试:工作.

Answer 8

作为对
解决方案的贡献,&#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>

演示

Answer 9

在 Chrome 79 上，
不再工作。

我成功了：




这适用于所有主要浏览器。

Answer 10


 将适用于所有主要浏览器(包括IE)

Answer 11

我知道我已经迟到了,但对于那些只想看到这个工作的人来说,这是一个演示:http://jsfiddle.net/rzea/vsp6840b/3/

使用的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>

Answer 12


如果您只使用简单的 title 属性，这应该可以工作。

在引导弹出窗口上，只需data-html="true" 在data-content属性中使用和使用 html 。

<div title="Hello &#013;World">hover here</div>

Answer 13

我们需要测试所有这些,这是我希望分享的内容

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&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#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&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

小提琴

Answer 14

我不相信.Firefox 2无论如何都会修剪长链接标题,它们实际上只能用于传达少量的帮助文本.如果您需要更多解释文本,我建议它属于与链接相关联的段落.然后,您可以添加工具提示javascript代码以隐藏这些段落并在悬停时将其显示为工具提示.这是让它跨浏览器IMO工作的最佳选择.

Answer 15


 <-----这是插入Carry Return所需的文本.

Answer 16

在Chrome 16以及可能的早期版本中,您可以使用"\n".作为旁注,"\ t"也有效

Answer 17

只需使用这个：

<a title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>link with tip</a>

您可以使用 this 在标题上添加新行&#x0a。

Answer 18

只需使用 JavaScript。然后与大多数和旧浏览器兼容。使用转义序列 \n 换行。

   document.getElementById("ElementID").title = 'First Line text \n Second line text'

Answer 19

至于谁
没有工作,你必须设置可见线条的元素:white-space: pre-line;

参考本答案:https://stackoverflow.com/a/17172412/1460591