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




相关文章
|
存储
Vue3 实现 PDF 文件在线预览功能
Vue3 实现 PDF 文件在线预览功能
2024 0
itextpdf 中文不显示问题
# 现象 itextpdf 打印时中文字体显示不出来,莫名其妙的消失不见了。具体现象如下图所示。 ![](https://ata2-img.oss-cn-zhangjiakou.aliyuncs.com/neweditor/ddc69588-4fc6-46ff-9d33-07f99340c963.png) 真正的理想情况如下图。 ![](https://ata2-img.oss-cn-zhangj
itextpdf 中文不显示问题
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
469 3
|
12月前
|
JSON API 数据格式
Django REST framework序列化器详解:普通序列化器与模型序列化器的选择与运用
Django REST framework序列化器详解:普通序列化器与模型序列化器的选择与运用
|
12月前
|
关系型数据库 MySQL 数据库
Django与MySQL:配置数据库的详细步骤
Django与MySQL:配置数据库的详细步骤
|
缓存 监控 JavaScript
环境搭建:Vue项目的开发环境和生产环境配置
【4月更文挑战第23天】本文指导Vue开发者配置开发和生产环境,强调了两者目的和特点。开发环境用于编写、测试和调试,侧重快速反馈和调试工具;生产环境注重稳定性、效率和安全性,需进行代码优化、错误处理和日志监控。配置步骤包括安装Node.js和npm,使用Vue CLI,配置Webpack、热重载和源码映射。生产环境要实现代码分割、压缩、最小化,启用CSP、HTTPS,优化静态资源和缓存策略。环境配置应随项目发展和技术进步持续优化。
1069 0
|
存储 前端开发 JavaScript
ACEeditor使用手册(二)
ACEeditor使用手册(二)
498 0
|
Linux iOS开发 MacOS
python创建虚拟环境的几种方式
python创建虚拟环境的几种方式
301 1
vue2之vuex实现数据持久化(vuex-persistedstate)插件
vue2之vuex实现数据持久化(vuex-persistedstate)插件
777 0
|
缓存 移动开发 JavaScript
阿里云OSS设置跨域访问
阿里云OSS设置跨域访问
15449 0