解决table td里面长串数字或字母不换行的问题
2015-05-20 17:42 流浪的诗人 阅读(7509) 评论(0) 编辑 收藏 举报在html中,经常要用到table标签,一般情况下,table下面的td元素里的东西都是汉字或者说是汉字、字母、数字的混合,在这种情况下,不设置table的宽度,也就是table宽度自适应的时候,浏览器如果缩小的话,table里面的内容会跟随浏览器的宽度换行。这个大家都清楚。但是如果td里面的内容都是纯数字或者纯字母,而且没有空格,会是什么情况呢?下面看看:
<table border="1"> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> </tr> <tr> <td>1111111111111111111111111111111111111111111111111111111111111111111111111</td> </tr> <tr> <td>CSDN创立于1999年,是中国最大的IT社区和服务平台,为中国的软件开发者和IT从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。</td> </tr> </table>
可以看到,有汉字的td会换行,但是如果是纯数字和纯字母的td没有换行,浏览器出现的横向的滚动条。当然,这个问题非常容易解决,就是给table添加一个样式:
style="word-break:break-all;"
这样就可以了。看看添加样式后的效果:
<table border="1" style="word-break:break-all;"> <tr> <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td> </tr> <tr> <td>1111111111111111111111111111111111111111111111111111111111111111111111111</td> </tr> <tr> <td>CSDN创立于1999年,是中国最大的IT社区和服务平台,为中国的软件开发者和IT从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。</td> </tr> </table>
不管是数字、字母还是汉字的td,都换行了。但是,如果是纯符号(标点符号),这个就不行了,相信也不会有这样的需求吧。
如果td里面的内容都是纯数字或者纯字母,而且没有空格,td可能就将那串东西认作是一个字符了,所以不会换行吧
你的关注和支持是对我最大的动力~
书山有路群[一个非常活跃的读书分享群,每周都有新书分享]:452450927
微博:http://weibo.com/u/2241641312
出处:http://www.cnblogs.com/wdlhao/
github:https://github.com/wdlhao
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?