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




相关文章
|
Linux
LINUX CUPS下载源码并编译
LINUX CUPS下载源码并编译
950 0
|
11月前
|
数据采集 存储 Web App开发
Python爬虫技巧:设置Cookie永不超时的详细指南
Python爬虫技巧:设置Cookie永不超时的详细指南
|
NoSQL 安全 Java
深入理解 RedisConnectionFactory:Spring Data Redis 的核心组件
在 Spring Data Redis 中,`RedisConnectionFactory` 是核心组件,负责创建和管理与 Redis 的连接。它支持单机、集群及哨兵等多种模式,为上层组件(如 `RedisTemplate`)提供连接抽象。Spring 提供了 Lettuce 和 Jedis 两种主要实现,其中 Lettuce 因其线程安全和高性能特性被广泛推荐。通过手动配置或 Spring Boot 自动化配置,开发者可轻松集成 Redis,提升应用性能与扩展性。本文深入解析其作用、实现方式及常见问题解决方法,助你高效使用 Redis。
1276 4
|
算法 数据可视化 Java
JAVA规则引擎工具有哪些?
本文对比分析了六种Java规则引擎:Drools、IBM ODM (JRules)、Easy Rules、JBPM、OpenL Tablets以及Apache Camel结合规则组件的应用。Drools是一款功能全面的业务规则管理系统,支持DRL文件定义规则、高效的规则匹配算法、复杂的规则流及决策表,并易于与Java应用集成。IBM ODM (原JRules)提供了强大的规则管理功能,包括Web界面和Eclipse插件定义管理规则、直观的决策表和决策树、REST和Java API集成选项及优化的性能。
2769 3
|
数据采集 JSON API
Python 实战:用 API 接口批量抓取小红书笔记评论,解锁数据采集新姿势
小红书作为社交电商的重要平台,其笔记评论蕴含丰富市场洞察与用户反馈。本文介绍的小红书笔记评论API,可获取指定笔记的评论详情(如内容、点赞数等),支持分页与身份认证。开发者可通过HTTP请求提取数据,以JSON格式返回。附Python调用示例代码,帮助快速上手分析用户互动数据,优化品牌策略与用户体验。
2226 3
|
Linux
Linux 文件权限详解
Linux 文件权限用于控制文件和目录的访问,分为读、写、执行三种权限,并针对文件所有者、所属组和其他用户分别设置。使用 `ls -l` 查看权限信息,`chmod` 修改权限。符号方式(如 `u+rwx`)和数字方式(如 755)均可设置权限。例如,`chmod +x filename` 添加执行权限给所有用户,`chmod 644 filename` 设置所有者读写、其他用户只读权限。
529 13
|
网络安全 Windows
Windows server 2012R2系统安装远程桌面服务后无法多用户同时登录是什么原因?
【11月更文挑战第15天】本文介绍了在Windows Server 2012 R2中遇到的多用户无法同时登录远程桌面的问题及其解决方法,包括许可模式限制、组策略配置问题、远程桌面服务配置错误以及网络和防火墙问题四个方面的原因分析及对应的解决方案。
1690 4
|
Linux Android开发 iOS开发
使用Kivy创建“Hello World”应用并打包成APK
使用Kivy创建“Hello World”应用并打包成APK
|
人工智能 自然语言处理 算法
AI 应用之成本节约实践
本文探讨了如何避免高成本的模型微调,通过任务拆解和提示词调优实现业务目标。文中提到,当大语言模型不能直接满足需求时,微调涉及大量工作,包括数据准备、模型训练及GPU资源。为降低成本,作者提出了两步方法:1) 任务拆解,将复杂任务分解为简单子任务,利用模型优势处理部分;2) 提示词调优,优化输入以引导模型更高效地响应。虽然这可能不适用于所有情况,但能有效减少对模型微调的依赖。
863 1
光纤交换机级联
光纤交换机级联
2280 0

热门文章

最新文章