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

【问题标题】：How can I use a carriage return in a HTML tooltip?如何在 HTML 工具提示中使用回车？
【发布时间】：2010-09-26 09:51:05
【问题描述】：

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

要添加我使用title 属性的提示。我浏览了常见的网站并使用了以下基本模板：

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

我尝试将? 替换为：

<br />
&013; / &#13;
\r\n
Environment.NewLine（我用的是 C#）

以上都不起作用。有可能吗？

【问题讨论】：

这很棘手，但可能有一种解决方法。将标题中的所有空格更改为不间断空格&nbsp;。然后在你想要换行的地方放空格。您可能还需要在空格前添加一堆 &nbsp; 字符（换行符）。

标签： html title tooltip

【解决方案1】：

试试第 10 个字符。但它在 Firefox 中不起作用。 :(

文本显示（如果有的话）浏览器依赖方式。小的工具提示适用于大多数浏览器。长 IE 中的工具提示和换行工作和 Safari（使用 &#10; 或 &#13; 新的换行符）。 Firefox 和 Opera 没有支持换行符。火狐没有支持长工具提示。

http://modp.com/wiki/htmltitletooltips

更新：

截至 2015 年 1 月，Firefox 支持使用 &#13; 在 HTML 的 title 属性中插入换行符。请参阅下面的 sn-p 示例。

&lt;a href="#" title="Line 1&amp;#13;Line 2&amp;#13;Line 3"&gt;Hover for multi-line title&lt;/a&gt;

【讨论】：

+1。如果您决定使用 jQuery 插件，为了获得最佳可访问性，它应该从 title 属性中读取其内容，并在运行时用一些任意不可见字符替换换行符。
+1。有趣的东西。仍然存在一些 UA 会在标题弹出时修剪标题的问题 - 我记得是 FF2，但这些天来这已经不是什么大问题了。
自 2015 年 1 月起，Firefox 支持在 title 属性中使用 &#13; 来插入换行符。
我无法在 IE11 的 SVG 元素 <title> 中使用换行符。有没有人在这方面取得了更大的成功？尝试了上面/下面提到的字符代码，似乎没有一个工作。

【解决方案2】：

&#13; 适用于所有主流浏览器（包括 IE）

【讨论】：

这个答案已经过时了；也适用于 Chrome 和其他浏览器。

【解决方案3】：

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

【讨论】：

【解决方案4】：

这很简单，你会踢自己：只需按 Enter！

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

【讨论】：

@Halcyon，只是为了给其他读者澄清一下，上面三个代码似乎不是HTML。它们看起来更像是源自 C 语言的字符串转义序列。
@Sam 我不明白你的意思。 \x0A（字节）是与换行符对应的字符代码。 \u000A (unicode) 相同。 \n 也是换行符。
@Halcyon，我尝试将这些转义序列插入到 Firefox 和 Chrome 中的 title 属性中，它们只是在工具提示中逐字呈现。之后，我意识到您可能正在使用该语法作为传达应该使用哪些字符（而不是转义序列）的一种方式。我的评论是为了节省其他人的时间，警告他们不要尝试将您的转义序列放在他们的 HTML 中，这样他们就不会像我那样浪费时间。
不确定是否与上面的 cmets 相关，但我发现虽然 \n 和 \r 实际上可以工作，但如果涉及 PHP，它们只能在 " " 和不在“”之内。
@Tarquin 它们不适用于 HTML，它们只适用于 PHP 的双引号，因为这是 PHP 双引号的一个特性。

【解决方案5】：

latest specification 允许换行符，因此在属性或实体&#10; 内的简单换行符（注意字符# 和; 是必需的）是可以的。

【讨论】：

Chrome 不支持，但 Firefox 可以！
我尝试了&#10; 和&#13;。 &#13; 不会尊重 chrome 版本 50.0.2661.94（64 位）中的预期“换行符”。 &#10; 在当前版本的 chrome、firefox 和 opera（均适用于 64 位 Ubuntu）和 Internet Explorer 11.0 版本以及 Windows 上的一些更改中运行良好。
这对我特别有用，因为我试图在 Wordpress 帖子编辑器上这样做。
在 IE、Firefox 和 Chrome 中运行良好。谢谢！
对于铬 ....... 示例：title="title1 title2 title3"

【解决方案6】：

&#xD;

【讨论】：

【解决方案7】：

从有关可访问性和使用工具提示的可用信息来看，使用 CR 或换行符使它们变大是值得赞赏的，各种浏览器不能/不会就基本内容达成一致的事实表明他们不太关心可访问性。

【讨论】：

有关跨浏览器自定义工具提示的非常简单的解决方案，请参阅kollermedia.at/archive/2008/03/24/easy-css-tooltip/…
@DaveThis 是一个不错的链接，但是演示中的换行是由于 width 属性而发生的

【解决方案8】：

据此article on the w3c website：

CDATA 是文档字符集中的字符序列，并且可能包括字符实体。用户代理应该解释属性值如下：

用字符替换字符实体，

忽略换行，

用一个空格替换每个回车符或制表符。

这意味着（至少）CR 和 LF 在 title 属性中不起作用。我建议您使用工具提示插件。这些插件中的大多数都允许将任意 HTML 显示为元素的工具提示。

【讨论】：

是的，我知道这不是官方的。你错了，无论如何。这并不意味着它们不会被显示。这意味着 W3C 规范没有说明它们应该如何显示......这篇文章的重点并不是建议它们可以用来替换更多功能的插件......更多的是在退化过程中可以使用其他任何东西。
@ip：我错了，更新后的 w3c 建议 suggest 浏览器围绕 LF 字符拆分内容。然而浏览器最终会实现这种行为。

【解决方案9】：

在 Chrome 16 以及可能的更早版本上，您可以使用“\n”。作为旁注，“\t”也可以使用

【讨论】：

【解决方案10】：

从 Firefox 12 开始，它们现在支持使用换行 HTML 实体的换行符：&#10;

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

这适用于 IE，根据title attribute 的 HTML5 规范是正确的。

【讨论】：

【解决方案11】：

如果你使用的是 jQuery：

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

会起作用的。

在 IE-9 中测试：工作。

【讨论】：

在 MVC 3 中工作示例：@Html.DropDownList("RegId", null, "Select Region", new { title = "从下拉菜单中选择一个区域，\n这是必需的获取有效合约名称列表", @class= "form-control", onchange = "getContractNames(this)", style = "width: 200px;" })

【解决方案12】：

另外值得一提的是，如果您使用 Javascript 设置 title 属性，如下所示：

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

这行不通。您必须以 Javascript 转义的方式将该 ASCII 十进制 10 替换为 ASCII 十六进制 A。像这样：

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

【讨论】：

@MaxNanasy 同意，它们等价（\n 表示字符代码 10）
谢谢！有用！我的用例涉及 AngularJS 中的字符串插值

【解决方案13】：

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

适用于所有这些...

【讨论】：

第一种方法（代码中的断行）似乎更简单，但不适用于自动格式化 js 代码程序。
@Camilo Martin，换行和换行在不同平台上是相同的。 &#10; 是 unix 换行符，就像它是 windows 换行符一样。同样，&#13; 是两个平台的换行符。 spec 指定换行符 (LF) 字符，这在两个（所有？）平台上当然是 &#10;。
@matty 不确定我是否理解你的意思——正确使用的似乎是 unix LF（这是跨协议和工具的标准换行符），CR 仅用于旧 Mac（和其他不起眼的平台），似乎不合适。
我为我令人困惑的用词选择道歉。我所说的换行符（#10）实际上是一个换行符，虽然通常被称为 LF。我所说的换行符（#13）实际上是一个回车。无论如何，我的观点是这些价值观在所有平台上都是相同的。 windows（使用这两个字符结束一行）和 mac（使用“错误”字符结束一行）应该与标题属性中使用哪个 HTML 实体无关。规范上写着&#10;，尽管&#13; 显然也适用于许多情况。
纯不适用于 Linux 上的 chrome。序列然而确实如此。

【解决方案14】：

就用这个吧：

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

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

【讨论】：

【解决方案15】：

我知道我迟到了，但对于那些只想看看这个工作的人来说，这里有一个演示：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>

【讨论】：

最新响应，在 Firefox 上运行良好。谢谢。

【解决方案16】：

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

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

【讨论】：

什么版本的 Chrome？它适用于我，我正在使用 Chrome。
其实我用的是最新版的Chrome，但是，因为我在做SVG Elements，所以没用，不是没问题。

【解决方案17】：

至于&#10; 对谁不起作用，您必须将其中可见行的元素设置为：white-space: pre-line;

引用自此答案：https://stackoverflow.com/a/17172412/1460591

【讨论】：

这种风格需要应用于什么？标题？喜欢a[title]?

【解决方案18】：

作为对&#013; 解决方案的贡献，如果您需要执行此类操作，我们还可以将&#009 用于标签。

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

演示

【讨论】：

【解决方案19】：

我们有一个要求，我们需要测试所有这些，这就是我想分享的内容

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

Fiddle

【讨论】：

【解决方案20】：

破解但有效 -（在 chrome 和移动设备上测试）

在它中断之前不要添加空格 - 您可能需要根据内容的数量来限制工具提示的大小，但对于小文本消息，这是可行的：

&nbsp;&nbsp; etc

尝试了以上所有方法，这是唯一对我有用的方法 -

【讨论】：

【解决方案21】：

Razor 语法

在 ASP.NET MVC 的情况下，您可以将标题存储为变量，就像使用 \r\n 一样，它会起作用。

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

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

【讨论】：

【解决方案22】：

如果您只使用一个简单的标题属性，这个&#013; 应该可以工作。

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

&lt;div title="Hello &amp;#013;World"&gt;hover here&lt;/div&gt;

【讨论】：

感谢您提供 Bootstrap 弹出框信息

【解决方案23】：

可以手动创建更好看的工具提示，并且可以包含 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&#13;&#10;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>

这取自the w3schools post。 Experiment with the above code here.

【讨论】：

【解决方案24】：

使用data-html="true" 并申请<br>。

【讨论】：

这不是规范的一部分。必须是一些随机的工具提示插件

【解决方案25】：

我试过用“ " 在新行中显示标题文本，它的工作就像一个魅力

【讨论】：

【解决方案26】：

在 Chrome 79 上，&#13; 不再起作用。

我成功了：

&#13;&#10;

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

【讨论】：

比公认的答案更好。源代码中的实际链接中断是可怕的。

【解决方案27】：

我在 Firefox 68.7.0esr 上，&#013; 不起作用。通过<CR> 打破界限确实有效，所以我会继续这样做，因为它简单且向前。即

<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk

【讨论】：

【解决方案28】：

“按回车”的解决方案在这里不起作用，所以好的旧 vanilla js 似乎是一种非常有效和干净的方式。

function customTitle(event, textHeader, text){
    let eventOrigin = event.target || event.srcElement;
    eventOrigin.title = textHeader + '\n\n' + text;
}

鼠标悬停在元素上

onmouseover="customTitle(event, 'Some Caput', 'Some more or less complete description');"

瞧！适用于chrome和firefox（不排除其他人，我只是没有检查它）。

【讨论】：

【解决方案29】：

如果您尝试在 React 项目中执行此操作，并以以下格式呈现：

title={`First line of text ${varOne} &#13; Second line of text ${varTwo} &#13; Third line of text ${varThree}`}

然后&#13;、&#10; 和类似的解决方案不起作用。它们实际上会呈现为文本。

实际上根据需要创建文本是一个更好的选择。一个更好理解的例子：

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

确保删除Second line of text 和Third line of text 之前的制表符/空格缩进，否则它们也会呈现。

在 Google Chrome 96 和 Firefox 95.0b12（开发版，因为，为什么不）上测试过。它应该也适用于大多数现代浏览器。

【讨论】：