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" ...
随机推荐
- Android(java)学习笔记102:Dalivk虚拟机的初始化过程
1. 初始化下面系统函数(调用dvmStartup函数初始化所有相关的函数) 开始学习虚拟机的初始化过程,先从dvmStartup函数开始,这个函数实现所有开始虚拟机的准备工作: dvmAllo ...
- 【BZOJ3925】[ZJOI2015] 地震后的幻想乡(状压期望DP)
点此看题面 大致题意: 有\(n\)个点和\(m\)条边,每条边的权值是一个\(0\sim1\)的随机实数,要你用\(n-1\)条边将图联通,问这\(n-1\)条边中边权最大值的期望最小值. 提示 这 ...
- jeesite项目
1,登录页面.最高权限管理员 用户名:thinkgem 密码:admin 2,登陆之后展示的首页 3,分为不同的模块,由不同的入负责,我负责日志管理 已完成功能:模糊查询,分页,导入,导出Excel ...
- 2017年9月11日 梁勇 java教材 编程练习题 第二章 2.15 键盘 读取两个点的坐标值(小数),控制台输出两点间距离。
package com.swift; import java.util.Scanner; public class PToP { public static void main(String[] ar ...
- Android驱动开发5-7总结
Android深度探索5-7章总结 介绍了S3C6410开发板的功能,开发板的不同主要是在烧录嵌入式系统的方式不同,以及如何在此开发板上安装Android.紧接着学到介绍到如何在多种平台,使用多种方式 ...
- 4396: [Usaco2015 dec]High Card Wins
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 275 Solved: 175[Submit][Status][Discuss] Descriptio ...
- LOJ#6342. 跳一跳(期望)
题意 $n \leqslant 10^5$ Sol 随便推一推就好了吧.. $f[i] = \frac{f[i] + f[i +1] + \dots f[n]}{n - i + 1} + 1$ 移一下 ...
- nginx修改nginx.conf配置可以https访问
修改nginx.conf,参照如下更改配置server { listen 443; server_name abc.com; // 访问域名 ssl on; root /var/www/bjubi.c ...
- rpc - 接口返回数据结构的设计
方案一: 系统级状态 .业务级别的状态同用 code要特殊声明保留状态,如若不声明保留状态,一旦业务开发人员用到了系统级的状态,就有必要侵入的改动业务返回的code(新code与业务欲返回的code ...
- selenium中webdriver跳转新页面后定位置新页面的两种方式
刚刚在写Python爬虫的时候用到了selenium , 在跳转新页面时发现无法定位新页面 , 查找不到新页面的元素 一番查询后得到了解决方法 , 便记录下来备忘 , 也与大家分享 # 页面跳转代码. ...