如何在HTML的标题属性中添加换行符/换行符？

Question

我正在使用这个

<a href="#" title="选择 1：这个 2：那个"> 点击这里 </a>

当有人悬停在上面时，我看到所有的文本都在一行中。

有没有办法让它显示在新行上？

- user26

---

https://dev59.com/L3VC5IYBdhLWcg3wlyMo#246451 - Voonic

Answer 1

你可以使用 
 或者 
 。

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

- skulled

---

在 Fedora (Linux) 中的 版本 68.0.3440.106（官方构建）（64 位） 上无法工作。 - RajnishCoder

在Chrome和Firefox中，
和
都对我有效。 - Flimm

如果它们单独在您的浏览器中无法工作，请尝试同时使用两者，这应该可以解决问题，

。 - datalifenyc

那个前缀 0 看起来像是八进制，但它们不是吗？ - Dee

如果你通过JavaScript设置属性，你需要使用反引号和换行符之间的实际换行符（\n对我来说不起作用）。这个答案中的HTML实体代码只在HTML中起作用（当然这是有道理的）。 - undefined

Answer 2

如果您正在动态生成内容，请在 HTML 部分中放置“<br/>”，在非 HTML 部分中则放置“\n”。

$("td").attr("title", "One \n Two \n Three");
$("td").html("One <br/> Two \n <br/>Three <br/>");
$("td").append("One \n Two \n Three");
$("td").append("<br/>One <br/> Two \n Three");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td></td>
    </tr>
  <tbody>
</table>

这是使用Jquery框架。

- Gaurav

Answer 3

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

- vishalkin

---

如果我是从数据库动态生成该内容，那么我需要输入什么字符？ - user26

@user26 你需要换行。例如，在PHP中，你可以这样做：echo '<a title="one\ntwo">';。如果你要从数据库中打印内容，请记得使用适当的转义，使用 htmlspecialchars 函数。 - Flimm

如果你想要一个新行但又不想弄乱你的HTML，可以使用
。 - bryc

Answer 4

由于您将此标记为可访问性，因此我建议最强大的方法是不依赖于标题来传递信息。 当前HTML规范 不鼓励此用法，因为使用键盘并看到屏幕的人不能使用鼠标（例如由于运动障碍），他们永远无法看到您的工具提示/标题文本。使用触摸屏的人也无法访问它。大多数使用屏幕阅读器的人也不会注意到标题文本，尽管在大多数屏幕阅读器中可以访问它，但默认情况下不会读出，并且某人必须知道要查找它。 （还有更多问题。）规范建议使用此进行换行：

然而，新行的显示取决于浏览器（如何在HTML工具提示中使用回车）。

我怀疑整体用户界面的方法需要更多思考，因为很多人会对你的示例中的指令感到困惑，即如果有多个选项，点击它会产生什么效果？

如果您的情况使得难以编写良好的链接文本，那么我建议在UX StackExchange上发布更多关于交互的内容。

- AlastairC