td文字溢出显示省略号

Posted 2020-09-17 奕佚

昨天遇到移动端表格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所占百分比

　　

最终显示效果如图