HTML实现title 属性换行小技巧

当我们在HTML标记中使用title属性时，有时候需要在倒数第二个单词之后添加一个换行符。这个时候我们可以用一些小技巧来完成。

当我们在HTML标记中使用title属性时，有时候需要在倒数第二个单词之后添加一个换行符。这个时候我们可以用一些小技巧来完成。

方法一：使用实体字符

HTML中有几个实体字符可以用于在title属性中添加换行：

• 
 或 
 表示回车
• 
 或 
 表示换行

代码示例：

<a href="#" title="第一行&#13;&#10;第二行">这是一个链接</a>

这个链接的title属性值将会在“第一行”和“第二行”之间插入一个换行符。

方法二：使用CSS white-space属性

利用CSS中的white-space属性，我们可以借助一个伪字符来实现换行显示。需要注意的是，这种方法需要对链接或元素添加一个class样式。

代码示例：

<style>
  .wrap {
    white-space: pre-wrap; /* 实现开启单词折行并自动折行 */
  }
  .wrap:after {
    content: '\A'; /* 添加伪字符，在此位置添加换行符，与实体字符相同 */
    white-space: pre; /* 告诉浏览器在伪字符之后不要自动折行 */
  }
</style>

<a href="#" class="wrap" title="第一行\n第二行">这是一个链接</a>

这个链接的title属性值将会在“第一行”和“第二行”之间插入一个换行符。

以上两种方法都可以在 title 属性中良好地进行换行，但需要注意的是，实体字符的的效率更高，同时语法更清晰明了。