1. 使用换行符换行

换行符分别为：
 或 

例如：

1

<a href="http://wenzhixin.net.cn" title="前端技术&#10;交互设计&#13;移动开发">文翼的博客</a>

2. 使用 jQuery.attr(‘title’, “) 的情况

实际项目应用中，我们常常会使用 jQuery 的 attr 方法来设置 title 属性。

例如：

1

$('a').attr('title', '前端技术&#10;交互设计&#13;移动开发');

可以发现并没有得到我们想要的结果，这是因为 jquery 对 & 进行了编码，这样显示出来并没有换行。

在这里，可以使用下面的代码解决该问题：

1
2

var title = $('<div/>').html('前端技术&#10;交互设计&#13;移动开发').text();
$('a').attr('title', title);

3. 解决浏览器兼容问题

测试了 chrome 和 firefox，貌似没什么问题，不过为了更好的解决浏览器兼容性，决定用 jQuery 来解决。

新建文件（jquery.wrap.title.js）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

$(function() {
    $(document).on('mouseover', '[title]', function(e) {
        var $this = $(this),
            title = $this.attr('title'),
            titles = [],
            $div = $('<div class="wrap-title"></div>');

        $this.attr('data-title', title);
        $this.removeAttr('title');

        $.each(title.split('\r'), function(i, item) {
            $.each(item.split('\n'), function(j, t) {
                titles.push(t);
            });
        });

        $div.html(titles.join('<br/>')).css({
            'left': e.pageX + 'px',
            'top': e.pageY + 'px',
            'position': 'absolute',
            'padding': '5px',
            'background': '#000',
            'color': '#fff',
            'font-size': '14px',
            'border-radius': '5px'
        });
        $(this).append($div);
    });
    $(document).on('mouseout', '[data-title]', function() {
        var $this = $(this),
            title = $this.attr('data-title');

        $this.attr('title', title);
        $this.find('.wrap-title').remove();
    });
});

代码兼容上面两种设置 title 的方法，不用修改任何 html 代码，使用：

1
2

<script src="js/jquery.min.js"></script>
<script src="js/jquery.wrap.title.js"></script>