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

    客户第一次发送请求给服务器,此时服务器产生一个唯一的sessionID,并返回给客户端(通过cookie),此时的cookie并没有setMaxAge();只是保存于客户端的内存中,并与一个浏览器窗口 ...

  2. Git push本地代码到新建远程仓库

    快速搞定  1.git init #初始化本地仓库 2.git remote add origin https://git.oschina.net/redArmy/springboot-swagger ...

  3. OS开发 touch事件的优先级和事件传递

    界面类的对象一般都是可以接触点击事件的,只不过有的默认接受,有的需要设定属性. userInteractionEnabled 属性设置为YES的时候就可以接受点击事件了 - (void)touches ...

  4. 山东省赛J题：Contest Print Server

    Description In ACM/ICPC on-site contests ,3 students share 1 computer,so you can print your source c ...

  5. Linux cpuinfo 详解

     在Linux系统中,如何详细了解CPU的信息呢? 当然是通过cat /proc/cpuinfo来检查了,但是比如几个物理CPU/几核/几线程,这些问题怎么确定呢? 经过查看,我的开发机器是1个物理C ...

  6. winserver2008下创建计划任务注意点

    winserver2008下创建任务计划注意点: 1.建立独立用户,可以给其赋予administrator权限 2.起始于(可选):要填写exe文件所在路径 3.设置成“不管用户是否登录都运行”,同时 ...

  7. [转] nginx+FastCGI+c++

    from: http://www.cnblogs.com/xiaouisme/archive/2012/08/01/2618398.html 一 安装 目的:不需支持php等.就html就行了.步骤: ...

  8. 构建服务端的AMD/CMD模块加载器

    本文原文地址:http://trock.lofter.com/post/117023_1208040 . 引言:  在前端开发领域,相信大家对AMD/CMD规范一定不会陌生,尤其对requireJS. ...

  9. 优雅退出 Android 应用程序的 6 种方式

    我们先来看看几种常见的退出方法(不优雅的方式) 一.容器式 建立一个全局容器,把所有的Activity存储起来,退出时循环遍历finish所有Activity import java.util.Arr ...

  10. Centos7+Apache2.4+php5.6+mysql5.5搭建Lamp环境——为了wordPress

    最近想搭建个人博客玩玩,挑来挑去发现口碑不错的博客程序是wordpress,简称wp.虽然是学java路线的程序员,但因入行时间太短,至今没有发现较为称手开源的博客程序,如果各位大神有好的推荐,也希望 ...