参考 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. POJ-3565 Ants---KM算法+slack优化

    题目链接: https://vjudge.net/problem/POJ-3565 题目大意: 在坐标系中有N只蚂蚁,N棵苹果树,给你蚂蚁和苹果树的坐标.让每只蚂蚁去一棵苹果树, 一棵苹果树对应一只蚂 ...

  2. 【转载】2018 hosts 持续更新访问 gu歌【更新于:2018-05-03】

      修改HOSTS实现免费,简单访问谷歌的目的   也是比较稳定的方法.修改hosts.修改hosts的方法,原理在于直接存储谷歌网站的IP地址.这样就不用DNS来解析网址了.也就是说,当我们输入谷歌 ...

  3. Java代码工具箱之超出游标最大数

    1. Java大量写入oracle时容易出现此错.经过此错,也触动自己要深刻理解 java 的 prepareStatement 等对象,及数据库的连接与释放. 2. 原因:经常会出现在 for 循环 ...

  4. 搜狗浏览器特性页面JS

    http://ie.sogou.com/features4.2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN ...

  5. head与body(新手向)

    网页文档包含了页头(head)与主体(body) 页头 -是对该网页文档进行描绘的主体信息. -至少含有title与meta. meta描述网页的特征,比如字符编码,平时广泛用的utf-8.且meta ...

  6. IOS后台执行

    大多数应用程序进入后台状态不久后转入暂停状态.在这种状态下,应用程序不执行任何代码,并有可能在任意时候从内存中删除.应用程序提供特定的服务,用户可以请求后台执行时间,以提供这些服务. 判断是否支持多线 ...

  7. A1043 Is It a Binary Search Tree (25 分)

    A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...

  8. 5.7 并行复制配置 基于GTID 搭建中从 基于GTID的备份与恢复,同步中断处理

    5.7 并行复制配置 基于GTID 搭建中从 基于GTID的备份与恢复,同步中断处理 这个文章包含三个部分 1:gtid的多线程复制2:同步中断处理3:GTID的备份与恢复 下面文字相关的东西 大部分 ...

  9. Spring+ ApplicationListener

    有时候 需要在容器初始化完成后,加载些 代码字典或不常变的信息  放入缓存之类的,这里使用spring 初始化bean,并实例化 1.创建一个ApplicationListener类 import o ...

  10. sql 参数化查询

      在初次接触sql时,笔者使用的是通过字符串拼接的方法来进行sql查询,但这种方法有很多弊端 其中最为明显的便是导致了sql注入. 通过特殊字符的书写,可以使得原本正常的语句在sql数据库里可编译, ...