table内容超出宽度时隐藏并显示省略标记
HTML中,一个表格,要达到二个条件:
1、内容多了不自动换行;
2、固定单元格宽度。如果内容超出,则隐藏;
如 果在IE下,只是写成<table style="table-layout:fixed; overflow:hidden;"><tr><td nowrap>则可,而在FF下则不行。兼容IE和FF的写法,应该为:<table style="table-layout:fixed;"><tr>td style="overflow:hidden;" nowrap>
3、显示省略标记,只支持IE:
text-overflow:ellipsis;
测试代码:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;text-overflow:ellipsis}</style>
<table class="tbl" border=1 width=80>
<tr>
<td width=25% class="td" nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
<td class="td" nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>
table内容超出宽度时隐藏并显示省略标记的更多相关文章
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
- CSS- 文本超出指定宽度后隐藏并显示为省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...
- Html table 内容超出显示省略号
内容超出显示省略号: <html> <style> table { table-layout: fixed; width: 100%; } table, th, td { bo ...
- Flex布局如何让子类在超出边界时隐藏掉
在flex4中,因为必须添加<s:Scroller>标签才能出现滚动条,如果一个容器例如Panel没有添加滚动条,那么添加到Panel中的child的位置如果超出了Panel的边界,那么这 ...
- CSS 文本溢出时显示省略标记
如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...
- 表格td内容超出宽度显示... table-layout: fixed;
td宽度用百分比固定好的时候,即使设置了 white-space:nowrap;/*文本不会换行,在同一行显示*/ overflow:hidden;超出隐藏 text-overflow:ellipsi ...
- css 内容超出宽度自动换行
1. word-break:break-all;只对英文起作用,以字母作为换行依据2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 PS:要设定宽度!
- Winform启动时隐藏不显示
我最终用了这个方法:1.MainForm的构造方法中添加: public MainForm() { InitializeComponent(); this.ShowInTaskbar = false; ...
- 当div元素内的内容超出其宽度时,自动隐藏超出的内容
word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ te ...
随机推荐
- numpy 矩阵运算
8.2 矩阵(Matrix)对象 Matrix类型继承于ndarray类型,因此含有ndarray的所有数据属性和方法.Matrix类型与ndarray类型有六个重要的不同点,当你当Matrix对象当 ...
- JavaEE权限管理系统的搭建(二)--------聚合工程项目的创建和依赖关系
本项目是一个聚合工程,所以要先搭建一个聚合工程的框架 搭建完成的项目结构图如下: 首先创建父项目:pom类型 子模块:web层的搭建,war类型 把这个两个目录标记为对应的类型 其他子模块:和serv ...
- Spring详解篇之IoC控制反转
###一.Spring概况 spring是一个开源框架 是一个轻量的控制反转和面向切面的容器框架 大小和开销都是轻量的. 通过控制反转技术可以达到松耦合的目的 切面编程,允许通过分离应用的业务逻辑. ...
- 分页查询关键代码 多条件查询关键代码 删除选中商品关键代码 修改要先回显再修改 修改要先回显再修改 同一业务集中使用同一servlet的方法
分页查询关键代码: 通过servlet转发回来的各种信息进行分页的设计(转发回的信息有 分页查询的List集合 查询的页码 查询的条数 查询的数据库总条数 查询的总页码) 从开始时循环10次出现十个数 ...
- LNMP+HAProxy+Keepalived负载均衡 - 基础服务准备
日志服务 修改日志服务配置并重启日志服务: ``` vim /etc/rsyslog.conf ``` 编辑系统日志配置,指定包含的配置文件路径和规则: ``` $IncludeConfig /etc ...
- javascript遍历方法总结
forEach 循环 JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.lengt ...
- ethereum(以太坊)(五)--Bool
pragma solidity ^0.4.0; contract Bool{ uint num1 = 100; uint num2 = 200; bool _c = true; // &&am ...
- Codeforces Round #438 C - Qualification Rounds 思维
C. Qualification Rounds time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- POJ:3320-Jessica's Reading Problem(尺取法)
Jessica's Reading Problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 15224 Accepted: ...
- [Link-Cut-Tree][BZOJ2631]Tree
题面 Description: 一棵\(n\)个点的树,每个点的初始权值为\(1\).对于这棵树有\(q\)个操作,每个操作为以下四种操作之一: + u v c:将\(u\)到\(v\)的路径上的点的 ...