我们经常会出现容器内文字溢出问题,我们可以给容器添加属性:
.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中提示,这样我们就能看见文字所有内容了。