包装标题属性答案

【问题标题】：Wrapping title attribute包装标题属性
【发布时间】：2012-02-16 00:20:00
【问题描述】：

Firefox 不会在 a title 属性中换行：

<a title="longword"></a>

在这种情况下有没有办法进行自动换行？我试过了：

<a title="longword" style="word-wrap:break-word;"></a>

但它不起作用。

Chrome 会自动换行。

【问题讨论】：

【解决方案1】：

不，您不能让 Firefox 偏离其呈现title 属性值的方式；参看。给How can I use a carriage return in a HTML tooltip?

使用title 属性创建的工具提示的可用性存在问题（用户无法轻易增加的小字体；几秒钟后消失等），因此它们（最多）适用于简短的咨询标题（主要用于链接），不需要包装。

对于较长的工具提示，请考虑使用 CSS 技术。或者只是将提示正确地放入文本中。

【讨论】：

【解决方案2】：

对于它的价值，HTML5 specifications 中唯一处理 title 属性中的换行符的部分指出：

如果title 属性的值包含U+000A LINE FEED (LF) 字符，则内容将分成多行。每个U+000A LINE FEED (LF) 字符代表一个换行符。

所以您可以在服务器端分解title 属性，尽管这不太可能是理想的解决方案。或者，您可以尝试插入zero width spaces，尽管浏览器对此的支持也可能不一致。

【讨论】：

自 2014/08 起，这适用于 Chrome、Firefox 和 IE！使用在标题属性中。请注意，IE 会自行包装标题工具提示，因此最好先检查一下包装是如何完成的，并通过在相同位置放置换行符来“模拟”它，以避免在 IE 中出现额外的换行符。

【解决方案3】：

使用转义的 n，例如：

<input type="text" title="first line \n second line"></input>

【讨论】：