css对html中表格单元格td文本过长的处理

参考 http://www.cnblogs.com/lekko/archive/2013/04/30/3051638.html

  http://www.zhangxinxu.com/wordpress/?p=4105

只关注实现其效果的css属性,暂无视浏览器兼容性。

table{
	table-layout: fixed;
}
.autocut{
	width:200px;
	overflow: hidden;
	white-space:nowrap;
	text-overflow: ellipsis;
}
.autocut:hover{
	overflow: visible;
	white-space: normal;
	word-wrap: break-word;
}

分别看一下达到其效果的属性:

table-layout: fixed;

让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。

overflow: hidden;

让溢出的内容被裁剪,使其不可见。

white-space: nowrap

不折行显示。

text-overflow: ellipsis;

溢出文本显示省略标记...

overflow: visible;

溢出文本可见,正常显示。

white-space: normal;

默认。空白会被浏览器忽略。这个不是很理解

word-wrap: break-word;

在长单词或 URL 地址内部进行换行。

时间: 2024-11-05 23:28:04

css对html中表格单元格td文本过长的处理的相关文章

table表格单元格中的内容如何强制换行

table表格单元格中的内容如何强制换行:有时候表格单元格中的内容不会换行,那么这个就会严重影响到用户体验,下面就简单介绍一下如何实现单元格中的内容换行.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" />

Rdlc技巧,rdlc报表中获取文本框或某个表格单元格中的内容

在RDLC报表中,随意摆放的控件,排列看起来很整齐,但是生成WEB后看就不是很友好了,导出PDF可能又是一个样, 解决这个办法就是把这些摆放在一个容器内,比如Table 内 用ReportItems这个属性来取value值.细节如下 =ReportItems!textbox1.Value + ReportItems!textbox12.Value 注意,页头页脚可以取Body里的值,但是Body里不可以取页头与页脚的值 Rdlc技巧,rdlc报表中获取文本框或某个表格单元格中的内容

表格中等宽单元格td之---获取节点下字符串的宽度

当我们给了table一个固定宽度时或者宽度为100%时,如果不给tr和td固定的width.height.table内部的tr和td会根据其自身的内容自动适应宽度和高度,项目中提出了一个需求,想让table中的某些tr(或者td)的宽度根据这些部分的内容,选出最大宽度,在赋值给这几个tr(或者td),从而做到部分tr(或者td)等宽 原图是这样的:产量列下的td长短不一 解决办法: (一)首先我想到了table的 标签自己的属性: table-layout:fixed ; 此属性可以让table

javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

jsp页面表格布局Html代码 <body > <center> <input type="text" value="111" id="mytext"> <table border="1" width="60%" id="mytable"> <tr> <td id="td1">第一行第一列<

关于html表格单元格宽度的计算规则

* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20px 0 } h2 { margin: 15px 0 } h3 { margin: 10px 0 } p { margin: 5px 0; border-left: 5px solid #ddd; padding-left: 10px } .table-wrap { } .tb-fixed { tab

Javascript横向/纵向合并单元格TD

在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1     JOB TOTAL SAL INDEX EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO 1 ANALYST 6000 1 7788 SCOTT ANALYST 7566 4/19/1987 3000.00   20 1 ANALYST 6000 2 7902 FORD ANALYST 7566 12/3/1981

如何实现可编辑表格单元格效果

如何实现可编辑表格单元格效果:在不少的网页都有这样的效果,可以编辑表格中的内容,非常的方便,在本站特效下载和网络上有一个可编辑单元格的实例,但是通过分析发现有诸多问题,最大一个问题就是浏览器不具有浏览器兼容性,所以本站写了一个简单的能偶兼容所有主流浏览器的效果,下面就通过实例简单介绍一下如何实现可以编辑单元格的效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q

对表格单元格的添加删除修改

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

使用vue自定义指令合并iview表格单元格

使用vue自定义指令合并iview表格单元格, 我们在开发过程中发现iview表格组件,官网只提供了合并表头的demo,并没有合并表格中的单元格. ivew表头分组:https://www.iviewui.com/components/table#BTFZ 效果图如下: 具体实现思路,通过vue自定义属性来操作dom,达到我们想要的效果: 代码如下: demo.vue  表格页面 <template> <div class="demo"><Table :c