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文字溢出显示省略号的更多相关文章
- css文字溢出显示省略号
1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...
- 文字溢出显示省略号,兼容ie9以上浏览器
最近遇上一个问题,文字溢出展示省略号在ie上不管用,经过查找,是少了word-wrap: normal;这个css属性 width:100px; overflow: hidden; white-spa ...
- CSS 文本和表格中文字溢出显示省略号
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- css 样式文字溢出显示省略号
在table中使用溢出样式,table样式要设置为”table-layout: fixed“,即<table style="table-layout: fixed;"> ...
- table td 文字超出显示省略号
.autocut { width:250px; overflow:hidden; white-space:nowrap; text-overflow:ellip ...
- css自动省略号...,通过css实现单行、多行文本溢出显示省略号
网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...
- 文字过长 用 ... 表示 CSS实现单行、多行文本溢出显示省略号
单行文本溢出显示省略号 max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行文本 ...
- CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS文本溢出显示省略号
项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...
随机推荐
- java实现第五届蓝桥杯海盗分金币
海盗分金币 有5个海盗,相约进行一次帆船比赛. 比赛中天气发生突变,他们被冲散了. 恰巧,他们都先后经过途中的一个无名的荒岛,并且每个人都信心满满,觉得自己是第一个经过该岛的人. 第一个人在沙滩上发现 ...
- [bx] and loop
1.[bx] 表示一个内存单元,它的偏移地址在bx中 mov al,[bx] 2.描述符号() 来表示一个寄存器或一个内存单元中的内容. 约定符号idata表示常量. 3.loop 标号 CPU在执行 ...
- javaweb之Servlet,http协议以及请求转发和重定向
本文是作者原创,版权归作者所有.若要转载,请注明出处. 一直用的框架开发,快连Servlet都忘了,此文旨在帮自己和大家回忆一下Servlet主要知识点.话不多说开始吧 用idea构建Servlet项 ...
- 如何在centos7安装dnf软件包
想在自己的笔记本CentOS7上安装dnf玩玩儿,但是根据百度出来的方法没有成功. yum install epel-release -y yum install dnf 现在将解决办法转载过来,如下 ...
- ESP8266局域网智能家居 路由器下作服务器模式串口透传 无线通信控制 arduino uno示例 模板参考
准备工作 下载一个Arduino IDE, 下载8266的库文件 ESP8266服务器模式串口透传编译 功能说明 1.直接使用路由器中转数据 2.手机放热点模式直接传输数据 两者有访问IP地址的差别, ...
- Python format格式化函数
参考资料:https://www.runoob.com/python/att-string-format.html 在学习Python的时候碰到了一个很有趣的格式化输入的技巧,下面记录在此. Pyth ...
- Android学习笔记使用AlertDialog实现对话框
使用AlertDialog可以实现如下对话框 案例 布局问文件就加了几个Button,我直接上Java代码了 实现显示带取消,确定按钮的对话框按钮 Button showDialogOne = fin ...
- maven配置错误之Unable to import maven project: See logs for details
很多朋友在初次使用maven时,都会出现这个问题. 一加载maven项目,即会报出Unable to import maven project这样的错误,哪怕是新的maven项目也不例外. 我查阅了很 ...
- PHP丨PHP基础知识之数据类型
PHP的数据类型主要有三大种:(细分的话8小种) 一.标量数据类型 标量数据类型包括以下几种: (1)BOOLEAN:布尔型 布尔变量是PHP变量中最简单的: 它保存一个TRUE或者FALSE值: 其 ...
- gerapy 爬虫web调度可视化工具(基于scrapyd)
web 基于scrapyd 提供主机管理功能 基于scrapyd管理已安装服务的主机. 进入具体主机管理页面,会自动加载所有已知爬虫任务: 可直接可以调度.运行.查看日志. 提供项目管理功能 将已知项 ...