td文字溢出显示省略号

标签：有心人   ima   宽度   ellipsis   images   移动   div   over   out   

昨天遇到移动端表格td中文字溢出问题，写了溢出隐藏样式，居然没起作用！

{
    overflow:hidden;//溢出隐藏
    white-space:nowrap;//文字不换行
    text-overflow:ellipsis;//显示省略号
}

然后查了查网上遇到的类似问题，用table-layout:fixed;可以解决此问题，但是我发现这个方法并不完美，甚至改变了我设置的td的大小，本来以30%和70%的显示的td，设置此属性之后居然以50%和50%显示，这就让我不爽了。于是乎花了好长时间解决这个问题，终于功夫不负有心人。

　　给td中的文字套了一个p标签，给p标签设置overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

　　注意重要的来了！

　　这个时候还要给p标签设置一个固定宽度（px），pc端直接设置固定宽度没有问题，但是移动端就需要根据屏幕大小来设定这个宽了。

var pWidth=$(window).width();
$(‘p‘).css(‘width‘,pWidth*0.7+‘px‘);//0.7是当前这个td所占百分比

最终显示效果如图

td文字溢出显示省略号

标签：有心人   ima   宽度   ellipsis   images   移动   div   over   out   

原文地址：http://www.cnblogs.com/wj19940520/p/6834538.html