首页 > 代码库 > 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文字溢出显示省略号
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。