参考 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文本过长的处理的更多相关文章

  1. 表格单元格td设置宽度无效的解决办法 .

    http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...

  2. 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示

    1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...

  3. 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>

    固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>     先上图例   & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...

  4. 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行

    1.常用表格标签 普通    <table>           |           <tr>          |           |          <th ...

  5. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  6. EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字

    EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母   Dim myReg    ...

  7. 使用POI创建word表格-在表格单元格中创建子表格

    要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...

  8. 关于html表格单元格宽度的计算规则

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  9. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

随机推荐

  1. 【BZOJ1029】[JSOI2007] 建筑抢修(堆优化贪心)

    点此看题面 大致题意: 有N个受到严重损伤的建筑,对于每个建筑,修好它需要\(T1\)秒,且必须在\(T2\)秒之前修完(\(T1\)与\(T2\)不是固定值),问你最多能修好几个建筑. 题解 一看到 ...

  2. Problem K: 搜索基础之棋盘问题

    Problem K: 搜索基础之棋盘问题 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 92  Solved: 53[Submit][Status][W ...

  3. 解决linux系统CentOS下调整home和根分区大小《转》

    转自http://www.php114.net/2013/1019/637.html 目标:将VolGroup-lv_home缩小到20G,并将剩余的空间添加给VolGroup-lv_root   1 ...

  4. day1总结

    print("hello world") name='王维是傻屌' print(name) age_of_王维是傻屌 = 18 # type:用于判断变量的类型 str1 ='he ...

  5. HTML第四章:初始css

    CSS样式:                 一.为什么要使用CSS;可以让页面更美观.有利于开发速度.                 二.什么是CSS:全称cascading style shee ...

  6. Java 对数组的筛选

    在Java里面 一般对一个数组进行筛选,去剔除一些元素,一般做法是用临时数组来存储,把符合条件的元素加入到新数组中,虽然数组有移除的方法但是 是线程不安全的: 而用迭代器Iterator,可以在遍历的 ...

  7. DevOps - 日志分析 -ELK

    wget --no-check-certificate --no-cookies --header "Cookie: oraclelicense=accept-securebackup-co ...

  8. win10.net 安装出问题0x800F70422

    因为安装ooracle数据库的时候需要用到.net但安装的时候出了0x800F70422, 随后就去网上查了下这个错出现的原因,发现是我之前把Windows自带的更新给禁用了 只要把它再开启就行了.

  9. Python 文件读写 文件和路径

    1.在Windows上,使用倒斜杆作为文件夹之间的分隔符,在Linux上,使用正斜杠作为路径分隔符.在编写Python脚本时,可以os.path.join()函数来处理 在Windows环境下命令如下 ...

  10. kubernetes dashboard permission errors

    kubernetes dashboard 的权限错误 warning configmaps is forbidden: User "system:serviceaccount:kube-sy ...