所谓省略就是把多余的字以“...”显示出来，而显示则是当鼠标移动到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. [Audio processing] 数据集生成 & 性别年龄分类训练 Python

    1.重命名,Python中文路径各种错误,所以需要先将所有文件的路径名全都改成中文.用的是MAC系统,所以WIN下的命令行批处理没法解决,所以用C来完成 // Created by Carl on 1 ...

  2. [Locked] Count Univalue Subtrees

    Count Univalue Subtrees Given a binary tree, count the number of uni-value subtrees. A Uni-value sub ...

  3. poj2393

    题目大意: 奶酪工厂 奶牛买了一个奶酪工厂制作全世界有名的Yucky酸奶,在接下来的N周(1<=N<=10000),牛奶的价格和工作将会受到波动例如他将花费C_i (1 <= C_i ...

  4. React Native专题

    转载注明出处:地址:http://www.lcode.org本文出自:[江清清的技术专栏]本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶 ...

  5. windows下计算文件的md和sha值

    在windows下可以使用FCIV命令行工具计算文件的md5和sha值,具体例子如下: FCIV -md5 -sha1 path\filename.ext 例如: FCIV-md5-sha1 c:\w ...

  6. angularJS promise $q

    Promise 一 介绍 1.什么是promise 我们知道JavaScript语言的执行环境是“单线程”,所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以 ...

  7. Python开发—Ajax系列

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  8. IOS UITextField 设置光标位置

    textField.leftView = [[[UIView alloc] initWithFrame:CGRectMake(, , , )] autorelease]; textField.left ...

  9. HDU 1548 A strange lift 搜索

    A strange lift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  10. SAP OTR 字段维护 更改SAP的字段翻译

    维护系统文本字段:SOTR_EDIT           TC:SE63 在SAP用户选择屏幕中,用鼠标选定一个栏位后按F1键,能够看到SAP对其详细解释,通常这样的解释文本分为两部分,一部分为标题, ...