解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况;但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行;最后找的的解决方案如下:
table{
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
}
如果担心隐藏了看不到完整的单元格内容建议在单元格上面加上title属性值就是单元格的完整内容这样只要鼠标经过就能显示全部了
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号的更多相关文章
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...
- 解决element-ui表格表头内容太长时的换行问题
在用vue+element-ui做一个后台管理系统时,遇到这样的问题, 如图: 使用el-table做一个表格,当表头内容过长时会换行,在不设置的宽度的时候每一列的宽度是等比例分配的,虽然elemen ...
- css强制换行和超出隐藏实现
一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 ...
- css强制换行和超出部分隐藏实现
一.强制换行 1 word-break: break-all; 只对英文起作用,以字母作为换行依据. 2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据. 3 whi ...
- CSS- 文本超出指定宽度后隐藏并显示为省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:25em; word-break:keep-all;/* 不换行 * ...
- css 文本超出n行就隐藏并且显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- 解决Linux CentOS中cp -f 复制强制覆盖的命令无效的方法
Linux下默认cp命令是有别名的(alias cp='cp -i'),无法在复制时强制覆盖,即使你用 -f 参数也无法强制覆盖文件,下面提供几个从网上找的Linux下cp命令覆盖的方法. 1)取消c ...
- 怎样让HTML 表格中内容自动换行??
<table style="word-break:break-all; word-wrap:break-all;">
- table内容超出宽度时隐藏并显示省略标记
HTML中,一个表格,要达到二个条件: 1.内容多了不自动换行: 2.固定单元格宽度.如果内容超出,则隐藏: 如 果在IE下,只是写成<table style="table-layou ...
随机推荐
- ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图
在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...
- 重置Oracle密码
在系统运行中输入: sqlplus /nolog 在命令窗口分别执行: conn /as sysdba alter user scott identified by tiger; alter user ...
- c#socket同步通信
再次特别感谢张子阳老师的文章,读后深感益处. 废话不多说,先贴代码 这是服务器端代码 using System; using System.Collections.Generic; using Sys ...
- Oracle RMAN 备份一例
Oracle RMAN备份一例: Solaris 10 + Oracle 11.2.0.3 Shell:csh,安装有bash,脚本调用bash 备份策略:周日0级备份,周一~周六1级备份,每6小时备 ...
- maven引入json-lib的正确方法
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...
- QT学习笔记2
初探信号槽 代码如下: QPushButton *button=new QPushButton("quit"); QObject::connect(button,SIGNAL(cl ...
- Emit学习(3) - OpCodes - 循环和异常
本来准备直接进入Dapper的, 但是昨天初步看了一下, 内容不少, Dapper不愧是一款成熟的框架, 里面对各种情况的考虑, 很实用, 不过这也使得我短时间内看不完, 所以得等几天了. 那就先来看 ...
- 使用Unity3d做异形窗口
项目马上上线,因为之前的登录器是使用VS2010的MFC做的,在很多电脑上会提示缺失mfcXXXX.dll,中间找寻这种解决方案,最后确定将vcredist2010_x86和我的程序打包到安装包里面, ...
- CSRF防御之ASP.NET MVC
MVC中的Html.AntiForgeryToken()是用来防止跨站请求伪造(CSRF:Cross-site request forgery)攻击的一个措施. 举个简单例子,譬如整个系统的公告在网站 ...
- CSRF 防御策略
在业界目前防御 CSRF 攻击主要有三种策略:验证 HTTP Referer 字段:在请求地址中添加 token 并验证:在 HTTP 头中自定义属性并验证.下面就分别对这三种策略进行详细介绍. 验证 ...