CSS实现table td中文字的省略与显示
所谓省略就是把多余的字以“...”显示出来，而显示则是当鼠标移动到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中文字的省略与显示的更多相关文章
- 用css控制table td内文字超出隐藏
(如有错敬请指点,以下是我工作中遇到并且解决的问题) 效果图: 重点是把table设置为table-layout: fixed; 超出的文字隐藏的效果才有. p标签超出的文字隐藏的效果不需要设置这个内 ...
- table不让td中文字溢出操作方法
table不让td中文字溢出操作方法 table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用. */ } t ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- 当td中文字过长时，显示为省略号
当表格中的文字过长时,可选择已省略号显示.这里是用js实现的.首先获取td中的文字长度(innerText.length),如果长度超过了设定的长度,则截取内容,加上省略号显示.示例代码如下: $(f ...
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...
- CSS 文本和表格中文字溢出显示省略号
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- table表格中文字超出显示省略号
第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一 ...
- table td中的内容过长，显示为固定长度，多余部分用省略号显示
简单描述:table数据过长,结果顶到下一格,影响了数据的查看 解决办法: 给table 加上style属性 另外 给td加上style标签修饰 <table class="tab ...
- td中文字居中
<style> .table_style{width: 100%;height: auto;} .table_style tr td{text-align: center;vertical ...
随机推荐
- 动态规划——J 括号配对问题
J - 括号匹配 Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit Sta ...
- 浅谈层次化的AI架构
原文地址:http://www.aisharing.com/archives/86/comment-page-1 记得在以前的一篇文章中谈到了一种类似于双缓冲的AI结构,最近在整理一些东西的时候,发现 ...
- tyvj P1517 飘飘乎居士的乌龟（最大流）
P1517 飘飘乎居士的乌龟 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 飘飘乎居士养了乌龟.当然,这些乌龟是用来出售赚取利润的. 描述 飘飘乎居士的乌龟 ...
- nyist 58 最小步数 BFS
最少步数 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 1,0 ...
- 《Linear Algebra and Its Applications》-chaper3-行列式-从一个逆矩阵算法证明引入的行列式
这一章节开始介绍线性代数中另外一个基本概念——行列式. 其实与矩阵类似,行列式也是作为简化表述多项式的一种工具,关于行列式的历史渊源,有如下的介绍. 在介绍逆矩阵的时候,我们曾提及二阶矩阵有一个基于矩 ...
- 动态规划——线性dp
我们在解决一些线性区间上的最优化问题的时候,往往也能够利用到动态规划的思想,这种问题可以叫做线性dp.在这篇文章中,我们将讨论有关线性dp的一些问题. 在有关线性dp问题中,有着几个比较经典而基础的模 ...
- 堆排序中建堆过程时间复杂度O(n)怎么来的？
首先这个循环是从i = headsize/2 -> 1,也就是说这是一个bottom-up的建堆.于是,有1/2的元素向下比较了一次,有1/4的向下比较了两次,1/8的,向下比较了3次,.... ...
- linux c 系统报错
本文中的错误是指在代码编译完全正确程序可运行的情况下,因为没有成功调用程序中的某些系统调用函数而产生的错误.往往这些系统调用函数通过返回值(比如1,0,-1)来说明其是否调用成功,而程序员需要知道详细 ...
- Java多态性举例说明
Java多态性的概念也可以被说成“一个接口,多个方法”. (一)相关类 class A ...{ public String show(D obj)...{ return ("A and D ...
- 国都企信通短信平台发送手机短信的python脚本一例
一年前,由于工作需要,给以色列的同事解释一下国都短信平台的短信发送格式,本来不懂python的我硬着头皮写了一个sample,比较粗,能用,但不优美,希望以后学会python能改得像我同事写的那么优雅 ...