容器文字溢出title显示

Posted 2020-10-26 webzxc

我们经常会出现容器内文字溢出问题，我们可以给容器添加属性:

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

这样文字溢出会出现省略，在样式上好看了很多；但是文字的全部能容却看不见了。由此引发了我的代码风暴，来看下面代码：

$body.on("mouseover",".className",function(){
    var div = document.createElement(‘div‘);
    div.innerhtml = $(this).text();
    var fs = $(this).css("font-size");
    div.id = ‘textWidth‘;
    div.style.fontSize = fs;
    div.style.margin = ‘0‘;
    div.style.padding = ‘0‘;
    div.style.float = ‘left‘;
    $("body").append(div);
    var $textWidth = $("#textWidth");
    var thisWidth = $(this).width();
    var textWidth = $textWidth.width();
    if (thisWidth < textWidth) {
        $(this).attr("title", $(this).text());
    }
    $textWidth.remove();
})

原理就是通过虚拟的创建一个容器与容器内文字宽度比较，来判断是否溢出，溢出部分我们给容器添加title属性，将内容显示在title中提示，这样我们就能看见文字所有内容了。