昨天遇到移动端表格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所占百分比
最终显示效果如图
时间: 2024-10-17 09:33:51