参考 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. 【CF1000C】Covered Points Count(离散化+差分)

    点此看题面 大致题意: 给出\(n\)条线段,分别求有多少点被覆盖\(1\)次.\(2\)次...\(n\)次. 正常的算法 好吧,这道题目确实有个很简单的贪心做法(只可惜我做的时候没有想到,结果想了 ...

  2. 【洛谷3232】[HNOI2013] 游走(贪心+高斯消元)

    点此看题面 大致题意: 一个无向连通图,小\(Z\)从\(1\)号顶点出发,每次随机选择某条边走到下一个顶点,并将\(ans\)加上这条边的编号,走到\(N\)号顶点时结束.请你对边进行编号,使总分期 ...

  3. 父子组件通信(vuex的方式)

    转: https://blog.csdn.net/lzh5997/article/details/80407518 父子组件也可以通过vuex的进行来进行中转,其实vuex就类似与一个仓库,父组件把东 ...

  4. pycharm 安装插件 支持markdown

    github项目中的README文件通常是md格式的,但是pycharm默认是不支持的,需要安装插件 进入settings中搜索plugins,然后在plugins中搜索markdown suppor ...

  5. Struts2 In Action笔记_页面到动作的数据流入和流出

    因为回答百度知道的一个问题,仔细查看了<Struts2 In Action>,深入细致的看了 “数据转移OGNL 和 构建视图-标签”,很多东西才恍然大悟. 一直觉得国外写的书很浮,不具有 ...

  6. XGBoost算法原理小结

    在两年半之前作过梯度提升树(GBDT)原理小结,但是对GBDT的算法库XGBoost没有单独拿出来分析.虽然XGBoost是GBDT的一种高效实现,但是里面也加入了很多独有的思路和方法,值得单独讲一讲 ...

  7. 第四篇、Swift_Podfile文件配置格式

    # Uncomment this line to define a global platform for your project platform :ios, '9.0' # Comment th ...

  8. 济南NOIP冬令营 选拔(select)

    选拔(select) Time Limit:2000ms   Memory Limit:128MB 题目描述 LYK对n个女生有好感.第i个女生的身高为ai. LYK要在这些女生中选拔出一个女生来作为 ...

  9. SpringMVC 多视图解析器 跳转问题

    在SpringMVC的配置文件中加入以下配置: <!--  下面红色的配置必须要在--> <mvc:default-servlet-handler /> <bean id ...

  10. Linux更改文件权限(二)

    更改文件权限(二)============================== (参考于千锋教育教学笔记) 命令umask [root@aminglinux ~]# umask 0022 [root@ ...