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

    freemaker强大的地方是还可以使用map. 一个场景就是对应后端的type类型,  type=01,02,03,04,   我们可以在controller定义一个map  typeMap,好处就 ...

  2. SRM 600(1-250pt,500pt)

    DIV1 250pt 题意:给定一个vector<int>A,若能从里面选出一些数,使得他们按位或的值为x,则称x为吉利数.给定k,问最少要从A里面去掉多少个数,才能使k变为不吉利数. 解 ...

  3. hdu 4604 Deque(最长上升与下降子序列-能够重复)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4604 这个题解有点问题,暂时没时间改,还是参考别人的吧 #include <cstdio> ...

  4. Android的minSdkVersion，targetSdkVersion，maxSdkVersion

    参考http://developer.android.com/guide/topics/manifest/uses-sdk-element.html API Level 是一个整型值,表示Androi ...

  5. 协议系列之HTTP协议

    什么是HTTP\HTTPS HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.HTTP协议用于从WWWserver传输超文本到本地浏览器的传输协议,它能使浏览 ...

  6. PHP Predefined Interfaces 预定义接口(转)

    SPL提供了6个迭代器接口: Traversable 遍历接口(检测一个类是否可以使用 foreach 进行遍历的接口) Iterator 迭代器接口(可在内部迭代自己的外部迭代器或类的接口) Ite ...

  7. Java程序员也应该知道的系统知识系列之(网卡,cpu,内存,硬盘,虚拟化)

    https://yq.aliyun.com/articles/1718?spm=5176.100240.searchblog.16.UaGd04 https://yq.aliyun.com/artic ...

  8. session绑定javaBean

    1.HttpSessionBindingListener   这个监听器,可以让javaBean对象,感知它被绑定到session中或从session中移除.2.HttpSessionActivati ...

  9. 《Android开发艺术探索》读书笔记 (11) 第11章 Android的线程和线程池

    第11章 Android的线程和线程池 11.1 主线程和子线程 (1)在Java中默认情况下一个进程只有一个线程,也就是主线程,其他线程都是子线程,也叫工作线程.Android中的主线程主要处理和界 ...

  10. AS Gradle构建工具与Android plugin插件【大全】

    Android plugin version 与 gradle version 的关系 Gradle是一种构建工具,它通过编写一个名为build.gradle的脚本文件对项目进行设置,再根据这个脚本对 ...