参考 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. C语言异常处理编程的三个境界

    http://blog.csdn.net/treefish2012/article/details/17466487 这是上一次看完Herb Sutter的<Exceptional C++> ...

  2. 浅谈 import / export

    import { ngModule } from '@angular/core'; import { AppComponent } from './app.component'; export cla ...

  3. Maven父子模块引入依赖问题

    公共模块如何放到父pom中,而子pom无需再次引入???

  4. Spring学习记录(一)

    1.Spring简介 Spring是一个轻量级的java开发框架.框架的主要优势之一就是分层架构,Spring使用基本的JavaBean,不仅限于服务器的开发.从简单性,可测试性和松耦合的角度而言,任 ...

  5. 关于后台获取不到HiddenField值的有关问题

    服务器加载aspx程序时,首先要执行后台cs文件中的page_load等方法中的代码,其它按钮事件等是不执行的,生成页面发送到客户端.客户端执行时会响应js脚本,提交到服务器后除了执行page_loa ...

  6. C# 常用函数和方法集汇总

    1.DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 currentTime=System.D ...

  7. http 调用错误处理

    1. http code 在使用Nginx时,经常会碰到502 Bad Gateway和504 Gateway Time-out错误,下面以Nginx+PHP-FPM来分析下这两种常见错误的原因和解决 ...

  8. Docker学习笔记--2 镜像的创建

    如果我们需要在Docker环境下部署tomcat.redis.mysql.nginx.php等应用服务环境,有下面三种方法: 1,根据系统镜像创建Docker容器,这时容器就相当于是一个虚拟机,进入容 ...

  9. 5.Cisco Packet Tracer里关于交换机或路由器配置文件和系统映像备份与恢复

    我们会将交换机或路由器的配置文件和系统镜像直接备份到tftp服务器上,所以我们需要准备一台tftp的服务器 1我们需要给服务器配一个ip地址,给路由器的f0/1端口配置一个ip地址,路由器与服务器能相 ...

  10. git bush的一些基础命令

    git bush的一些基础命令(不区分大小写) 通过命令创建本地仓库 首先自己需要手动建一个文件夹用于本地仓库 进行如下输入,使用cd跳转到刚刚创建的文件夹中 之后再输入 git init 即可创建 ...