td 内容自动换行 table表格td设置宽度后文字太多自动换行


Posted in HTML / CSS onDecember 24, 2022

设置table 的 style="table-layout:fixed;" 然后设置td的 style="word-wrap:break-word;" 即可

但这种情况下表格宽度自由分配,所以如果不用设置table 的 style="table-layout:fixed;"直接使用下面的代码也可以实现换行

word-wrap:break-word;word-break:break-all;

案例

<table style="TABLE-LAYOUT: fixed" border="1" cellspacing="0" cellpadding="0" width="200">
    <tbody>
        <tr>
            <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td style="WORD-WRAP: break-word" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
    </tbody>
</table>

例子二

<table border="1" cellspacing="0" cellpadding="0" width="200">
    <tbody>
        <tr>
            <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td style="word-wrap:break-word;word-break:break-all;" width="20">sssssssssssssssssssssssssssssssssssssssssssssss </td>
            <td>aaaaa</td>
        </tr>
    </tbody>
</table>

比较好的写法

#soft-intro table{border:1px solid #cccccc; border-collapse:collapse; text-align:center; margin-top:0.54em; clear:both;width: 100%;}
#soft-intro table th,#soft-intro table td{padding:8px; border:1px solid #dddddd;line-height:22px; text-align:left}
#soft-intro table th{background:#f9f9f9;}
#soft-intro table thead, #soft-intro table.jbborder tr {background-color:#fff;}
#soft-intro table tr:nth-child(even){background-color:#f9f9f9}
#soft-intro table tbody tr:hover {background: rgba(255,255,153,.4)}
#soft-intro table th img{display:block; margin:5px auto 0;}
#soft-intro table td{text-align:left;word-wrap:break-word;word-break:break-all;}
#soft-intro table td.version{font-weight:bold;}
#soft-intro table pre{width:auto;margin:0;padding:0;border:0;background:transparent}
#soft-intro table td p{margin:0; padding:0;line-height:22px;word-wrap:break-word;word-break:break-all;}
#soft-intro table ul{margin-top:2px;}

 

 
HTML / CSS 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
详解CSS中iconfont的使用
Aug 04 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 #HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 #HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 #HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 #HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 #HTML / CSS
详解CSS3浏览器兼容
Dec 24 #HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 #HTML / CSS
You might like
php 8小时时间差的解决方法小结
2009/12/22 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
express启用https使用小记
2019/05/21 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python利用微信公众号实现报警功能
2018/06/10 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python模块如何查看
2020/06/16 Python
Python如何解除一个装饰器
2020/08/07 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
学校大课间活动方案
2014/01/30 职场文书
法人授权委托书范本
2014/04/04 职场文书
环境整治工作方案
2014/05/18 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
地方课程教学计划
2015/01/19 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers