前两天遇到一个问题,在调试一个表格的格式时,设定了td的宽度,结果内容超长时换行显示了,于是,在td的css中设定了:
overflow:hidden;溢出隐藏
white-space:nowrap;文本不换行,直到遇到<br>标签为止
设置好之后,以为可以达到不换行且溢出隐藏的效果,但是结果是文本不换行,但溢出也没有隐藏,表格直接被撑开了,哪里设置的不对吗?
尝试了好多次都不行,在网上查了半天,最后找到了正确的做法:
td的style设置:
overflow:hidden;white-space:nowrap;
并且设定width
table的style设置:
table-layout:fixed
并且设定width,是各个td相加之和
如上述方法设置好之后,达到了预期的效果。
附:
语法:
white-space
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列,但是正常地进行换行。 |
pre-line | 合并空白符序列,但是保留换行符。 |
inherit | 规定应该从父元素继承 white-space 属性的值。 |
overflow
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
相关推荐
任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度 任意改变table表格td的宽度 动态td的宽度
table表格td设置宽度后文字太多导致自动换行,这是一个很常见的问题,或许很多的网友已经有了好的解决方法,如果依然有童鞋们不会的,可以参考下本文,可能会有意外的收获
本程序主要是用table表格拖动改变td宽度。
overflow用在div上时很好用,但直接用在td上,好像没有任何效果。td中的文本过长时依然自动换了一行像下面这要设定一下就行了
改变table的列宽度,可以拖拽的td表格,表格内文字只显示一行,超过的部分自动隐藏
overflow:hidden; So easy! 但效果仍然出乎意料:文本全部在一行显示,宽度自动加宽,甚至还超出了父容器,overflow完全没有起作用! 怎么回事? 百分比的原因么? 但是如果使用静态的固定宽度,就失去了表格的...
页面中table宽度设置width=600px之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了。 解决办法: 1.table 设置 宽度,绝对宽度和相对都可以 table-layout:fixed ; 设置了这个属性,其余所有td都是...
纯css实现table滚动条(纯css实现div滚动条),主要是通过设定高度/宽度及overflow:auto;实现.
JSP中table的td标签迭代循环,控制循环的行数,换行
所谓省略就是把多余的字以“…”显示... } .autocut{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -
主要介绍了JS获取Table中td值的方法,实例分析了javascript操作table中td的技巧,非常具有实用价值,需要的朋友可以参考下
在对设置表格设置table-layer:fixed样式后,发现表格中有一行合并过,其它没有合并的行的列宽会平均化,对列宽的设置会失效,下面有详细的解决方法,大家可以学习学习
正则取html中table中td中的值 京华志&精华志出品 分享资源 C# ASP.NET SQL DBA 源码
实现boostrap表格td宽度可以自由拖动。简单易用,内含源代码
动态更改TABLE中TD的数据 动态更改TABLE中TD的数据 动态更改TABLE中TD的数据
html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo,一个项目使用的,拿出来分享,代码比较简洁,代码量少。绝对可用,宽度可自适应。用到实际项目上还需要自行调整。
基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...
在w3cschool中css3中有个文本相关的属性text-overflow,当把它设为ellipsis时文本溢出内容就能显示为省略标记,而设为clip时就能把文本溢出的部分裁切掉,当然,前提是设置好两个属性,那就是white-space:nowrap...
1、数据较多时需要横向竖向滚动,很多数值记不清谁是谁了,所以需要主要标题内容需要固定。 2、通常的首行首列的固定,下方滚动条左侧会空缺一块,不够美观,我加了一层悬浮的div 给予适应