换行

Question

  

可能重复：
  How can I use a carriage return in a HTML tooltip?

我想知道在使用TD的title属性时是否可以在工具提示中强制显示换行符。

之类的东西

<td title="lineone \n linetwo \n etc...">

可以这样做吗？

Answer 1

这应该适用于Internet Explorer，Firefox v12 +和Chrome 28 +

<img src="'../images/foo.gif'" 
  alt="line 1&#013;line 2" title="line 1&#013;line 2">

尝试使用JavaScript工具提示库以获得更好的结果，例如OverLib。

Answer 2

实现类似效果的一种方法是通过CSS：

<td>Cell content.
  <div class="popup">
    This is the popup.
    <br>
    Another line of popup.
  </div>
</td>

然后在CSS中使用以下内容：

td div.popup { display: none; }
td:hover div.popup { display: block; position: absolute; }

你会想要添加一些边框和背景以使弹出看起来像样，但这应该勾勒出这个想法。但它有一些缺点，例如弹出窗口不是相对于鼠标而是相对于包含单元格。

Answer 3

可扩展标记语言（XML）1.1 W3C建议书

«所有换行必须在2.11行尾处理中描述的#xA输入上进行归一化，因此该算法的其余部分对以这种方式归一化的文本进行操作。 »

链接为http://www.w3.org/TR/2006/REC-xml11-20060816/#AVNormalize

然后你可以写：

<td title="lineone &#xA; linetwo &#xA; etc...">

Answer 4

这应该没问题，但具体是Internet Explorer：

<td title="lineone
linetwo 
etc...">

正如其他人所提到的，唯一的另一种方法是使用基于HTML + JavaScript的工具提示，如果您只对工具提示感兴趣的话。如果这是为了可访问性，那么您可能需要坚持使用单行来保持一致性。

Answer 5

我使用jQuery clueTip插件。

Answer 6

使用
在Chrome中工作，在工具提示中创建单独的行。

Answer 7

使用
在我的fb应用中无效。 然而，这确实很好（在Chrome FF和IE中）：

<img src="'../images/foo.gif'" title="line 1&lt;br&gt;line 2">

Answer 8

如果您希望将换行符放在鼠标悬停时出现的工具提示中，那么就没有可靠的crossbrowser方法。你必须回到许多Javascript工具提示代码示例之一

Answer 9

jquery colortip插件也支持<br>  title属性中的标签，你可能想要查看那个。