文字顯示過長時以省略符號顯示並提示完整文字

此CSS只作用於單行文字的顯示上

.text-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

為了達到只在過長被省略才顯示提示，需要用javascript判斷一下 (這邊以jQuery為例)

$(function() {
    $('.text-overflow-ellipsis').each(function() {
        if (this.offsetWidth < this.scrollWidth && !$(this).attr('title')) {
            $(this).attr('title', $(this).text());
        }
    });
});