所谓省略就是把多余的字以“...”显示出来，而显示则是当鼠标移动到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. kNN

    传统的kNN模型 为了获得用户对产品的评分预测值,kNN模型一般包括以下三步: 1.计算相似度 这步中计算每对产品之间的相似度 Person correlation: \[S _ {mn} ^{P} ...

  2. [Audio processing] 数据集生成 & 性别年龄分类训练 Python

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

  3. [AS/400] 基本概念

    本文内容源于 Go4AS400 在 AS/400 中,AS 代表着 Application System.AS/400 是一个安全性高的系统,可以限制用户只能访问.处理特定的信息.AS/400 整合了 ...

  4. 动态规划——树形dp

    动态规划作为一种求解最优方案的思想,和递归.二分.贪心等基础的思想一样,其实都融入到了很多数论.图论.数据结构等具体的算法当中,那么这篇文章,我们就讨论将图论中的树结构和动态规划的结合——树形dp. ...

  5. 80X86 分段机制（读书笔记）

    GDT(全局描述符表)本身并不是一个段,而是线性地址空间的一个数据结构.GDT的线性地址和长度必须加载进GDTR寄存器中.LDT(局部描述符表)存放在LDT类型的系统段中.此时GDT必须含有LDT的段 ...

  6. hdu 2795 线段树

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2795 #include <cstdio> #include <cmath> # ...

  7. Mac内建Apache开机启动

    取消: sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 添加: sudo launchctl ...

  8. QueryPerformanceFrequency使用方法--Windows高精度定时计数

    在多核心或多处理器的计算机上.特别是在支持CPU频率动态调整的计算机上,windows系统下的QueryPerformanceFrequency()获取HPET(假设存在)的频率,而QueryPerf ...

  9. cocos2d-x3.0 Physics新的物理引擎

    1.说明: 3.0以后将box2d和chipmunk这两个物理引擎进行了封装,使用起来很的便利 2.详细用法: 1.创建物理世界场景 auto scene = Scene::createWithPhy ...

  10. eclipse设置系统字体

    1. 打开eclipse-->Window-->Preferences-->General-->appearance-->Colors and Fonts, 点开后选择B ...