如果你试图在一个React项目中这样做，你将以下面的格式呈现:

title={`First line of text ${varOne} 
 Second line of text ${varTwo} 
 Third line of text ${varThree}`}

那么
，
类似的解决方案并不奏效。它们实际上会呈现为文本。

相反，根据需要实际创建文本是更好的选择。为了更好地理解，举个例子:

title={`First line of text ${varOne}
Second line of text ${varTwo}
Third line of text ${varThree}`}

确保在“第二行文本”和“第三行文本”之前删除制表符/空格缩进。否则他们也会渲染。

它在谷歌Chrome 96和Firefox 95.0b12(开发者版，因为，为什么不呢)上进行了测试。它应该也适用于大多数现代浏览器。

如果你正在使用jQuery:

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

将工作。

它在Internet Explorer 9上进行了测试:工作正常。

我们有一个需求，我们需要测试所有这些，下面是我想分享的:

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/>

小提琴

剃须刀的语法

在ASP的情况下。NET MVC，你可以把标题存储为变量，作为\r\n，就可以了。

@{
    var logTooltip = "Sunday\r\nMonday\r\netc.";
}

<h3 title="@logTooltip">Logs</h3>

只是分享我看到的小bug:

在Chrome 103中使用以下html:

<！DOCTYPE html > < html > <身体> <select title="Line 1:&#13;&#13;Line 2"> 测试<选项值= " 0 " > < /选项> < /选择> < /身体> < / html >

我看到了这个:

在截图上-“第一行:”文本后的两个奇怪的字符，第一行。

修复: (我不知道哪个是正确的/有效的，但它们都可以作为修复(在Chrome 103中))

在第一行之后添加空格(字符):在第一个&#13之前;修复它 先改变&#13;& # 10;全行标题="第一行:&#10;&#13;第2行" 添加,在第一行之后:在第一个&#13; 也在改变&#13;“回车符号”将修复它

这里是一个演示: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>