如何在 HTML 的标题属性中添加新的换行符/换行符 [重复]答案

【问题标题】：How can I add new line/linebreak character in title attribute in HTML [duplicate]如何在 HTML 的标题属性中添加新的换行符/换行符 [重复]
【发布时间】：2013-09-07 13:11:21
【问题描述】：

我正在使用这个

<a href="#" title="select from 1: this 2: that" > Click here </a>

当有人将鼠标悬停在它上面时，我会在一行中看到所有文本。

有什么方法可以在新行显示吗？

【问题讨论】：

stackoverflow.com/a/246451/2261259

标签： html css hover accessibility

【解决方案1】：

<a href="#" title="select from 
1: this 
2: that" >Click here</a>

【讨论】：

但是如果我从数据库动态生成它呢？我需要放什么字符
@user26 你需要换行。例如，在 PHP 中，你会这样做：echo '<a title="one\ntwo">';。如果您要从数据库中打印某些内容，请记住使用 htmlspecialchars 进行正确的转义。
如果您想要换行符但又不想弄乱您的 HTML，请使用 &#13;。

【解决方案2】：

当您将此标记为可访问性时，我想说最可靠的方法是不要依赖标题来获取信息。

current HTML spec 不鼓励这种使用方式，因为无法使用鼠标（例如由于行动不便）但使用键盘并看到屏幕的用户永远不会看到您的工具提示/标题文本。使用触摸屏的人无法访问它。

大多数使用屏幕阅读器的人也不会知道标题文本，尽管可以在大多数屏幕阅读器中访问它默认情况下不会读出，并且必须有人知道才能查找它。（还有there are more issues。）

规范建议使用此换行符：

如果标题属性的值包含“LF”(U+000A) 字符，则内容被分成多行。每个“LF”（U+000A）字符代表一个换行符。

但是，新行的显示取决于浏览器 (How can I use a carriage return in a HTML tooltip)。

我怀疑整体 UI 方法需要更多考虑，因为许多人会被您示例中的那种指令混淆，即如果有多个选项，单击它会实现什么？

如果您的情况难以write good link text，那么我会在UX stackexchange 上发布更多有关互动的信息。

【讨论】：

【解决方案3】：

如果你是动态生成的，就把\n

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

这是使用 Jquery 框架。

【讨论】：

【解决方案4】：

您可以使用&#013; 或&#010;。

<a href="#" title="select from 1: this &#013; 2: that" >Click here</a>

<a href="#" title="select from 1: this &#010; 2: that" >Click here</a>

【讨论】：

这在 Chrome 43 中不起作用。它在哪里起作用？
@matty 在未来的 Chrome 66 中。
在 fedora (linux) 中的 Version 68.0.3440.106 (Official Build) (64-bit) 中不工作
在 Chrome 中只有 &#10; 工作。
&#013; 和 &#010; 在 Chrome 和 Firefox 中都适用于我。