guoshuai93 / blog

19 stars 2 forks source link

HTML 标签title属性的提示换行显示 #29

Open guoshuai93 opened 6 years ago

guoshuai93 commented 6 years ago

鼠标悬停于目标对象时的提示内容(title 属性值)换行显示的方法。如下:

codepen 在线演示

实现方式:

  1. 回车换行

    <a href="#" title="
    作者:author
    日期:2018-06-25
    来源:网站                   
    ">详情</a>

    缺点是:代码会显得很乱,体验差。

  2. 字符实体换行

    <a href="#" title="作者:author&#13;日期:2018-06-25&#13;来源:网站">详情</a>

    行与行之间用 &#10;(回车) 或 &#13;(换行)分隔就可以让 title 里面的内容按照我们期望的样子出现。
    同时字符实体很好地解决了排版体验差的问题。