td文字溢出显示省略号
2024-09-03 01:10:18
昨天遇到移动端表格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所占百分比
最终显示效果如图
最新文章
- 同步异步,阻塞非阻塞 和nginx的IO模型
- apidoc
- Python 之WEB框架
- csharp: 用Enterprise Library对象实体绑定数据
- 将数据导入hive,将数据从hive导出
- 关于stl string find 容易犯的一个错误
- 【记忆化搜索】Codeforces Round #295 (Div. 2) B - Two Buttons
- 从xib加载文件
- jQuery&;HTML&;CSS3实现垂直手风琴折叠菜单方法讲解
- 走进C标准库(1)——assert.h,ctype.h
- csdn的登录框好难看
- Kettle(Pentaho)实现web方式远程执行job或transformation
- ASP.NET Core 网站发布到Linux服务器
- vue-cli安装
- Visual Studio总是在重新生成项目?
- sort()与sorted()区分开
- Python3 jupyter notebook 服务器搭建
- [Java] zjdbcping:JDBC数据库连接测试工具
- django之创建第1个项目并查看网页效果
- 推荐 VSCode 上特别好用的 Vue 插件 - vetur
热门文章
- java实现第七届蓝桥杯路径之谜
- PAT 月饼
- Spring Boot 集成 Swagger 构建接口文档
- mysql基础之-mysql数据控制语言DCL(七)
- 【个人博客 hexo】一个小时就搭好属于自己的博客
- Vue-Cli4.x配置文件路径别名
- Redis的内存和实现机制
- .Net Core微服务入门全纪录(二)——Consul-服务注册与发现(上)
- [每日一题2020.06.09] leetcode #97 交错字符串 dp
- PytorchMNIST(使用Pytorch进行MNIST字符集识别任务)