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

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

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

link with tip

我试过更换?:




&013; /

\r\n

Environment.NewLine (我正在使用C#)

以上都不是.可能吗？

1> Kornel..：

---

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

---

在IE,Firefox和Chrome中都能很好地工作.谢谢!

---

我试过' `和` `.` `不会在chrome版本50.0.2661.94(64位)中兑现预期的"换行符".` `在当前版本的chrome,firefox和opera(全部用于64位Ubuntu)和Internet Explorer 11.0版本以及Windows上的一些更改时运行良好.

---

它不支持Chrome,但对Firefox来说很好!

2> Greg..：

---

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

link with tip

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

---

这个答案已经过时了,Firefox _does_现在在标题中显示换行符(我正在使用v25).它适用于`\n`,`\ u000A`和`\ x0A`.

---

@Halcyon,我尝试将这些转义序列插入到Firefox和Chrome中的`title`属性中,它们只是在工具提示中直接显示.之后,我意识到你可能正在使用该语法作为一种沟通方式,应该使用哪些字符(不是转义序列).我的评论是为了节省其他人的时间,警告他们不要试图将你的转义序列放在他们的HTML中,这样他们就不会像我那样浪费时间.

---

@Tarquin它们不能用于HTML,它们只是专门用于PHP的双引号,因为这是PHP双引号的一个特性.

---

@Sam我不明白你的意思.`\ x0A`(byte)是与换行符对应的字符代码.对于`\ u000A`(unicode)也是如此.`\n`也是换行符.

3> Stefan Mai..：

---

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

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

http://modp.com/wiki/htmltitletooltips

更新:

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

Hover for multi-line title

4> Morten Repsd..：

---

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

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

---

在哪个平台上？` `是unix` \n`.

---

@matty不确定我是否理解你 - 正确使用的东西似乎是unix`LF`(这是一种跨协议和工具的标准换行),`CR`只用于旧Mac(以及其他模糊平台)并且似乎没有的地方.

---

平原 在Linux上不适用于chrome.序列 然而,确实如此.

5> cprcrack..：

---

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

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

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

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

---

`"Line one \nLine two"`也有效,IMO更具可读性.

6> amurra..：

---

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

Test

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

7> Anil Bharadi..：

---

如果你使用jQuery:

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

将工作.

在IE-9中测试:工作.

8> Juan Cortés..：

---

作为对 解决方案的贡献, 如果您需要执行此类操作,我们也可以使用标签.

TEST

9> Greg Dean..：

---

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

---

这个答案已经过时了; 适用于Chrome和其他浏览器.

10> Ricardo Zea..：

---

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

使用的HTML:

Multiline Tooltip




Unordered list tooltip

---

最新的响应,在Firefox上运行良好.谢谢.

11> xameeramir..：

---

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

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")

Tooltip with 
  new 
  line
 Works in all browsers



Tooltip with 
 Not works Firefox browsers


Tooltip with 
 Works in some browsers


Tooltip with 
 May work in some browsers


Tooltip with document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine") May work in some browsers



Tooltip with • Unordered list tooltip



Tooltip with \n May not work in modern browsers


Tooltip with \t May not work in modern browsers


Tooltip with 
 Works in most browsers

12> roborourke..：

---

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

13> 小智..：

---

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

14> Rehan Khwaja..：

---

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

15> Youans..：

---

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

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