首页 > 代码库 > td文字溢出显示省略号

td文字溢出显示省略号

昨天遇到移动端表格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文字溢出显示省略号