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 相关文章推荐
css3图片边框border-image的用法
Jun 30 HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 HTML / CSS
CSS3 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
May 07 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
html实现弹窗的实例
Jun 09 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简单图像创建入门实例
2015/06/10 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
JS的replace方法介绍
2012/10/20 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
js查找节点的方法小结
2015/01/13 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
Python学习资料
2007/02/08 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python绘图pyecharts+pandas的使用详解
2020/12/13 Python
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
小学优秀班主任事迹材料
2014/05/17 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
教师年终个人总结
2015/02/11 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
改造DE1103三步曲
2022/04/07 无线电
MySQL 逻辑备份 into outfile
2022/05/15 MySQL
JavaScript前端面试组合函数
2022/06/21 Javascript
win sever 2022如何占用操作主机角色
2022/06/25 Servers