HTML title 全局属性用法与换行技巧

title 是 HTML 的全局属性，任何标签上都能写。它的效果看起来很简单——鼠标悬停时冒出一个小提示框，但它有两个容易被忽略的特性：会沿着 DOM 树向上继承，以及可以用字符实体控制换行。这篇把这两点连着示例一起记下来。

需要先说清楚它和 <title> 标签完全是两回事：<title> 标签写在 <head> 里，决定浏览器标签页上显示的文字和搜索结果里的标题；而这里说的 title 是写在元素上的属性，只负责鼠标悬停提示。

作用

全局属性 title 包含代表与它所属的元素有关的咨询信息的文本。
当鼠标移到节点上时，会以工具提示的弹出形式显示该属性的属性值文本。

提示框的样式、出现延迟、消失时机全部由浏览器和操作系统决定，CSS 改不了。这也是为什么 UI 库都不用原生 title 做 Tooltip，而是自己拿绝对定位的 div 实现一套——只有这样才能控制外观和动画。

另一个更实际的限制是它只对鼠标生效：纯键盘操作和触屏设备上，用户根本没办法触发这个提示。所以 title 只适合放补充性信息，真正必要的说明必须写进可见文本。给 <img> 用的话也别拿它替代 alt，屏幕阅读器对 title 的支持并不一致。

属性继承

如果一个元素没有 title 属性，那么它就从它的父节点继承，而父节点又可以从它的父节点继承，以此类推。
如果这个属性被设置为空字符串，这意味着它的祖先的 title 是不相关的，不应该被用于这个元素的工具提示中。

这个继承机制常常带来意料之外的效果：给一个容器加了 title 之后，容器内所有没有自己 title 的子元素，悬停时都会弹出同一段提示。想让某个子元素安静下来，就给它写 title=""，用空字符串明确切断继承链。

下面的示例把三种情况放在一起，划上去逐个对比：外层 div 有 title="CoolTip"，第一个 <p> 没写 title，于是继承到外层的值；第二个 <p> 写了 title=""，什么都不显示；第三个 <p> 有自己的 title，它内部的 <span> 也没写，所以继承到最近的那个「我自己的」，而不是最外层的 CoolTip。

<div title="CoolTip">
  <p>鼠标在这里停留会显示“CoolTip”。</p>
  <p title="">鼠标在这里停留不会显示任何东西。</p>
  <p title="我自己的">
    我自己的
    <span>我自己的子标签</span>
  </p>
</div>

多行标题

title 属性可采用  或 
 控制文本换行

提示文字一长，浏览器会摊成很宽的一条，读起来很难受。这时可以在属性值里插入换行字符实体来手动断行。
 是换行符 LF（\n）， 是回车符 CR（\r），HTML 规范要求把 title 里的这两个字符渲染为换行。

之所以要写成  这种字符实体形式，是因为 HTML 属性值不能直接换行——在源码里按回车会被当作普通空白折叠掉。同理，如果这段文字是在 JS 里拼出来的，直接写 \n 就行，不需要转成实体：

el.title = '第一行\n第二行\n第三行';

下面的示例同时用了两种实体，划上去能看到提示被断成了三行：

<p>
  title 中的换行，像
  <span title="这是&#13;标题&#10;又换行了">这个示例(划上去)</span>
  。
</p>