css对html中表格单元格td文本过长的处理
参考 http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html
http://www.zhangxinxu.com/wordpress/?p=4105
只关注实现其效果的css属性,暂无视浏览器兼容性。
table{
table-layout: fixed;
}
.autocut{
width:200px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
}
.autocut:hover{
overflow: visible;
white-space: normal;
word-wrap: break-word;
}
分别看一下达到其效果的属性:
table-layout: fixed;
让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。
overflow: hidden;
让溢出的内容被裁剪,使其不可见。
white-space: nowrap
不折行显示。
text-overflow: ellipsis;
溢出文本显示省略标记...
overflow: visible;
溢出文本可见,正常显示。
white-space: normal;
默认。空白会被浏览器忽略。这个不是很理解
word-wrap: break-word;
在长单词或 URL 地址内部进行换行。
css对html中表格单元格td文本过长的处理的更多相关文章
- 表格单元格td设置宽度无效的解决办法 .
http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...
- 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示
1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...
- EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字
EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母 Dim myReg ...
- 使用POI创建word表格-在表格单元格中创建子表格
要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...
- 关于html表格单元格宽度的计算规则
* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- 2018.6.10 Oracle数据库常见的错误汇总
1.ClassNoFoundException 找不到注册驱动 可能原因:1>驱动名称不对 2>没有导入数据库驱动包 2.SQl 语句中可以使用任何有效的函数,函数操作的列,必须指定别名, ...
- python_72_json序列化2
#序列化(json是最正规的) import json info={ 'name':'Xue Jingjie', 'age':22 } f=open('第72.text','w') print(jso ...
- Linux 下MySQL数据库配置远程访问
1. mysql -u root -p 第一次直接回车跳过密码 2. use mysql; 3.执行授权命令 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDE ...
- C#的接口基础教程之四 访问接口
对接口成员的访问 对接口方法的调用和采用索引指示器访问的规则与类中的情况也是相同的.如果底层成员的命名与继承而来的高层成员一致,那么底层成员将覆盖同名的高层成员.但由于接口支持多继承,在多继承中,如果 ...
- JS控制台的使用
1.快捷键F12可直接进入控制台(或者单机右键->检查)用于bug调试 2.控制台如图: Elements:表示所有的js元素 Console:常用的有如下几个功能: ①console.log: ...
- python之2.x与3.x区别(仅限于基础)
因为看的是python2.x的书籍.用的是python 3.7.所以先把两者的区别记录一下,仅限于基础. 1.input python3.0之后,不区分input()和raw_input(),统一为i ...
- 三次样条插值matlab实现
三次样条插值matlab实现 %三次样条差值-matlab通用程序 - zhangxiaolu2015的专栏 - CSDN博客 https://blog.csdn.net/zhangxiaolu201 ...
- FZU 2082 过路费(树链剖分)
树链剖分模板题. FZU炸了,等交上去AC了再贴代码.
- Codeforces Round #460 (Div. 2)-A. Supermarket
A. Supermarket time limit per test2 seconds memory limit per test256 megabytes Problem Description W ...
- 多进程的基本使用--multiprocessing 【转】
multiprocessing 如果你打算编写多进程的服务程序,Unix/Linux无疑是正确的选择.由于Windows没有fork调用,难道在Windows上无法用Python编写多进程的程序? 由 ...