内容超出表格<td>宽度则自动隐藏

简介:

在表格中,有时候当表格中的内容多了就会把表格自动加宽、变形等问题。
如果想将超出表格的部分自动隐藏,解决办法如下:
第一种办法:直接隐藏(当文字超出TD宽时,自动隐藏),有个缺点就是可能最后面会出现只显示半个字的情况,印象美观。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
td{border:1px solid #ccc}
td span{width:100px; height:200px;display:block;overflow:hidden;white-space:nowrap;word-break:keep-all;}
</style>
</head>
<body>
<table >
<tr>
    <td ><span>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测</span></td>
    <td ><span>测试测试测试测试测试测试测试测试测试测试</span></td>
   </tr>
</table>
</body>
</html>

第二种办法:当表格中的内容超过设定值时,则自动隐藏


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dw8.cn</title>
<style type="text/css">
#yc {
width:600px;
height:100px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="yc">
<table cellspacing="0" cellpadding="0">
<tr>
<td>51UDF 集合当前最热门的PHP开源框架(Discuz、phpwind、Ecshop、DedeCMS、WordPress、HDWiki)进行源代码分析及二 次开发,为广大PHP二次开发爱好者提供一个完美的学习和交流平台。 </td>
</tr>
</table>
</div>
</body>
</html>

大家不妨复制到本地试试,很实用哦!




      本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/925203,如需转载请自行联系原作者




相关文章
|
前端开发
CSS 限制文字行数(超出显示省略号...)
CSS 限制文字行数(超出显示省略号...)
116 0
|
JavaScript 前端开发
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示
CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度
原文:CSS------当内容超出div宽度后自动换行和限制文字不超出div宽度和高度 如图:   1.自动换行 111111111111111111111111 2.限制宽高度 11111111111111111111111111  (注意:如果div放在li中还需...
3872 0
|
2月前
|
前端开发 JavaScript 容器
文字溢出隐藏及鼠标悬停显示效果
文字溢出隐藏及鼠标悬停显示效果
98 0
|
7月前
div 文字溢出文字自动隐藏显示
div 文字溢出文字自动隐藏显示
61 0
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
layUI table 内容超出宽度怎么换行显示,而不是显示省略号
378 0
form表单,tr循环生成,当超出页面显示时无滚动条
form表单,tr循环生成,当超出页面显示时无滚动条
122 0
|
前端开发 测试技术
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
434 0
|
JavaScript 容器
rAF实现表格内容自动滚动
rAF实现表格内容自动滚动
325 1