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 地址内部进行换行。
css对html中表格单元格td文本过长的处理的更多相关文章
- 表格单元格td设置宽度无效的解决办法 .
http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...
- 使用CSS和JQuery实现表格单元格内容超出时部分隐藏,隐藏部分以...显示
1.使用CSS实现,给此单元格添加一个Class: width:130px; display:block; overflow:hidden; word-break:keep-all; white-sp ...
- 固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生>
固定表头,单元格td宽度自适应,多内容出现-横向纵向滚动条数据表格的<前世今生> 先上图例 & 无论多少数据--都完美! 背景:由于我司行业方向,需要很多数据报表,则t ...
- 【表格设置】HTML中合并单元格,对列组合应用样式,适应各浏览器的内容换行
1.常用表格标签 普通 <table> | <tr> | | <th ...
- colgroup中col定义表格单元格宽度
colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...
- EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字
EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母 Dim myReg ...
- 使用POI创建word表格-在表格单元格中创建子表格
要实现的功能如下:表格中的单元格中有子表格 实现代码如下: XWPFParagraph cellPara = row.getCell(j).getParagraphArray(0); //row.ge ...
- 关于html表格单元格宽度的计算规则
* { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
随机推荐
- 转载请注明:Windows 系统必备好用软件&工具合集跟推荐 | 老D博客
Windows 系统必备好用软件&工具合集跟推荐 97 63,371 A+ 所属分类:工具软件 一.浏览器 二.下载软件 三.播放软件 五.电子邮件客户端 六.图片/照片 浏览查看工具 七.文 ...
- Python pep8代码规范
title: Python pep8代码规范 tags: Python --- 介绍(Introduction) 官方文档:PEP 8 -- Style Guide for Python Code 很 ...
- CUDA并行存储模型
CUDA将CPU作为主机(Host),GPU作为设备(Device).一个系统中可以有一个主机和多个设备.CPU负责逻辑性强的事务处理和串行计算,GPU专注于执行高度线程化的并行处理任务.它们拥有相互 ...
- mantis基本配置及邮件服务器配置
邮件服务器配置 在c:\php-5.0.3\php.ini文件中查找smtp,将localhost改为你的发件服务器,如SMTP = smtp.163.com 在php.ini文件中查找sendm ...
- Oracle分页抽数存储过程
--outTotal是需要返回的总数,v_loginUserId是传入的登录人ID,抽取他的客户,v_CurrPage是传入的第几页,v_pageSize传入的每页数据条数. ) FROM tb_cu ...
- 1412: [ZJOI2009]狼和羊的故事
Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4017 Solved: 2037[Submit][Status][Discuss] Descript ...
- 2018.10.30 NOIp模拟赛T2 数字对
[题目描述] 小 H 是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为 n 的序列{ai},她想找出一段区间[L, R](1 <= L <= ...
- 14.2-ELK 经典用法—企业自定义日志收集切割和mysql模块
本文收录在Linux运维企业架构实战系列 一.收集切割公司自定义的日志 很多公司的日志并不是和服务默认的日志格式一致,因此,就需要我们来进行切割了. 1.需切割的日志示例 2018-02-24 11: ...
- 二叉树(dfs)
样例输入: 5 //下面n行每行有两个数 2 3 //第i行的两个数,代表编号为i的节点所连接的两个左右儿子的编号. 4 5 0 0 // 0 表示无 0 0 0 0 样 ...
- 各种友(e)善(xin)数论总集(未完待续),从入门到绝望
目录 快速幂 扩展欧几里得 GCD 扩展欧几里得 同余系列 同余方程 同余方程组 一点想法 高次同余方程 BSGS exBSGS 线性筛素数 埃式筛 欧拉筛 欧拉函数 讲解 两道水题 法雷级数 可见点 ...