开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

内容超出表格<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,如需转载请自行联系原作者




版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
div内容超出自动滚动
div内容超出自动滚动
0 0
elementui表格内容超出显示省略号
elementui表格内容超出显示省略号
0 0
css设置文本超过宽度后显示省略号点点点
css设置文本超过宽度后显示省略号点点点
0 0
表格中文本一行显示,超出部分用省略号代替。
table{table-layout:fixed;width:100px;} .table tr td:nth-child(4){ text-align: left; padding-left: 10px; width: 20%; word-break:keep-all;  //规定自动换行的处理方法;keep-all:只能在半角空格或字符处换行。
602 0
easyui datagrid 列的内容超出所定义的列宽时,自动换行
在datagrid中添加一句,DataGrid属性中的nowrap:false。 (默认为true)。 注意nowrap不是列属性, xxx   这样是不行的。   需要写在datagrid中 eg: html:   id ...
487 0
div 自适应高度 自动填充剩余高度
方案1: Html: 头部DIV 下部DIV CSS: html, body { height: 100%; padding: 0; margin: 0; } .
651 0
textarea宽度、高度自动适应处理方法
textarea自动高度 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.
680 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载