超过宽度和高度文字会自动隐藏 --费元星
2015-09-23 16:44
281 查看
页面中table宽度设置width="600px"之后,宽度仍然不是固定的,文字太长后不换行,把table都撑变形了。
解决办法:
1.table 设置 宽度,绝对宽度和相对都可以
table-layout:fixed ;
设置了这个属性,其余所有td都是相同的宽度。
这样操作之后,table是宽度固定了,但是里面的文章如果很长,文字会覆盖
解决办法:
在 td 里面 加上 style="word-wrap:break-word;"
自动换行就好了,如果不想换行,可以将超出内容设为隐藏,并且用省略号代替:
在td上面加
复制代码
代码如下:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;(目前仅在IE8测试通过)
推荐方法(2013-11-14 by
张雷)用div控制td的内容
在TD中加
(1)超过宽度和高度文字会自动隐藏
复制代码
代码如下:
<div
style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
(2)设置了td的宽度超过长度自动换行
复制代码
代码如下:
<td><div
style="width:100px;word-wrap:break-word;"
>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>
解决办法:
1.table 设置 宽度,绝对宽度和相对都可以
table-layout:fixed ;
设置了这个属性,其余所有td都是相同的宽度。
这样操作之后,table是宽度固定了,但是里面的文章如果很长,文字会覆盖
解决办法:
在 td 里面 加上 style="word-wrap:break-word;"
自动换行就好了,如果不想换行,可以将超出内容设为隐藏,并且用省略号代替:
在td上面加
复制代码
代码如下:
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;(目前仅在IE8测试通过)
推荐方法(2013-11-14 by
张雷)用div控制td的内容
在TD中加
(1)超过宽度和高度文字会自动隐藏
复制代码
代码如下:
<div
style="width:100px;height:25px;overflow-x:hidden;overflow-y:hidden;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
(2)设置了td的宽度超过长度自动换行
复制代码
代码如下:
<td><div
style="width:100px;word-wrap:break-word;"
>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</td>
相关文章推荐
- Zabbix 集成 OneAlert 实现全方位告警
- JavaScript类型识别
- JS实现漂亮的淡蓝色滑动门效果代码
- 【ECLIPSE】两步完成eclipse配色
- Poj.2249 Binomial Showdown【组合数】 2015/09/23
- Apache Shiro权限框架在SpringMVC+Hibernate中的应用
- tomcat共享jar包(maven项目)
- nyoj——469 擅长排列的小明 II
- SpringMVC进阶(四)——注解开发
- 运维生存时间呕血之作:网站运维黑锅如何甩
- PAT(甲级)1014
- 迈普、海能达面试杂谈
- pinyin4j支持简拼和多音
- 1264:Counting Squares
- IOS沙盒目录
- 随诊医生3---应用介绍页面
- Office 2016 正式发布——新特性预览
- 编程原则
- CentOS 下源码安装LAMP环境
- css3背景渐变以及图片混合渲染模式(一)