所谓省略就是把多余的字以“...”显示出来，而显示则是当鼠标移动到td上时，把省略的字重新显示出来。对于一个table，兼容IE与FF、Chrome的省略方式CSS写法：

 table{

     width:200px;

     table-layout: fixed;

 }

 .autocut{

     overflow:hidden;

     white-space:nowrap;

     text-overflow:ellipsis;

     -o-text-overflow:ellipsis;

     -icab-text-overflow: ellipsis;

     -khtml-text-overflow: ellipsis;

     -moz-text-overflow: ellipsis;

     -webkit-text-overflow: ellipsis;

 }

 .autocut:hover

 {

     overflow:visible;

     white-space:normal;

     word-wrap: break-word;

 }

　　使用时，把autocut赋给td的clss类，即可：

 <table>

     <thead>

         <tr>

             <th>Column1</th>

             <th>Column2</th>

         </tr>

     </thead>

     <tbody>

         <tr>

             <td>Column1</td>

             <td class="autocut">

         自动剪裁吧！自动剪裁吧！

         </td>

         </tr>

     </tbody>

 </table>

　　特别需要注意的是，在HTML文件一定要加上这句声明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　否则IE就不起作用啦，当然，由于IE6对hover的支持只到a标签，所以IE6就不能这样通过css来显示了（可以给td内部加上a标签，然后设置其css，或者通过js来处理事件），效果图：

　　

　　转载请注明原址：http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html

CSS实现table td中文字的省略与显示的更多相关文章

  1. 用css控制table td内文字超出隐藏

    (如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 重点是把table设置为table-layout: fixed; 超出的文字隐藏的效果才有. p标签超出的文字隐藏的效果不需要设置这个内 ...

  2. table不让td中文字溢出操作方法

    table不让td中文字溢出操作方法 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } t ...

  3. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  4. 当td中文字过长时，显示为省略号

    当表格中的文字过长时,可选择已省略号显示.这里是用js实现的.首先获取td中的文字长度(innerText.length),如果长度超过了设定的长度,则截取内容,加上省略号显示.示例代码如下: $(f ...

  5. CSS实现超出DIV宽度文字自动隐藏并显示省略号

    当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...

  6. CSS 文本和表格中文字溢出显示省略号

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  7. table表格中文字超出显示省略号

    第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一 ...

  8. table td中的内容过长，显示为固定长度，多余部分用省略号显示

    简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性   另外 给td加上style标签修饰 <table class="tab ...

  9. td中文字居中

    <style> .table_style{width: 100%;height: auto;} .table_style tr td{text-align: center;vertical ...

随机推荐

  1. HttpURLConnection学习

    转自:http://mobile.51cto.com/abased-448264.htm 最常用的Http请求无非是get和post,get请求可以获取静态页面,也可以把参数放在URL字串后面,传递给 ...

  2. Android 通过反射让SQlite建表如此简单

    我们通常使用SQlite的时候,假设我们有10张表,我们要写10个建表语句.而建表语句中仅仅有一些字段的名字须要改而已,这样既费时又费力,还easy出错.我们知道写sql语句的时候常常会写错,假设写错 ...

  3. Android 网络框架--Retrofit

    1.导入Jar包 compile 'com.google.code.gson:gson:2.8.0' compile 'com.squareup.retrofit2:retrofit:2.1.0' c ...

  4. C\C++代码优化的27个建议

    1. 记住阿姆达尔定律: funccost是函数func运行时间百分比,funcspeedup是你优化函数的运行的系数. 所以,如果你优化了函数TriangleIntersect执行40%的运行时间, ...

  5. UML中的图

    用例图.类图.包图.顺序图.协作图.状态图.活动图.构件图.部署图等 1.用例图 显示多个外部参与者以及他们与系统提供的用例之间的连接.用例是系统中的一个可以描述参与者与系统之间交互作用功能单元.用例 ...

  6. MyEclipse 安装SVN插件方法及插件下载地址

    直接解压法 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240下载SVN插件:site-1.x.x. ...

  7. python-property、docstring--笔记

    已经有人总结的非常详细,而且写得不错,就直接贴过来用了 property作为装饰器函数,负责把一个方法变成属性调用的 廖雪峰关于property的讲解 http://www.liaoxuefeng.c ...

  8. Python之路,Day8 - Socket编程进阶

    Python之路,Day8 - Socket编程进阶   本节内容: Socket语法及相关 SocketServer实现多并发 Socket语法及相关 socket概念 socket本质上就是在2台 ...

  9. 使用CSS、JS的几种方法

    引用CSS到html网页里的4种方法 1.行内式 在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用     <div style="widt ...

  10. jsp引入struts标签，引入自己写的jquery需要注意的问题

    1.使用struts2标签的时候在jsp页面开头引入这句话: <%@ taglib prefix="s" uri="/struts-tags"%> ...