1. 使用換行符換行

換行符分別為： 或

例如：

<a href="http://wenzhixin.net.cn" title="前端技術&#10;互動設計&#13;移動開發">文翼的部落格</a>

2. 使用 jQuery.attr('title', '') 的情況

實際專案應用中，我們常常會使用 jQuery 的 attr 方法來設定 title 屬性。

例如：

$('a').attr('title', '前端技術
互動設計
移動開發');

可以發現並沒有得到我們想要的結果，這是因為 jquery 對 & 進行了編碼，這樣顯示出來並沒有換行。

在這裡，可以使用下面的程式碼解決該問題：

var title = $('<div/>').html('前端技術&#10;互動設計&#13;移動開發').text();
$('a').attr('title', title);

3. 解決瀏覽器相容問題

測試了 chrome 和 firefox，貌似沒什麼問題，不過為了更好的解決瀏覽器相容性，決定用 jQuery 來解決。

$(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 程式碼，使用：

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