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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
Jun 15 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
slideToggle+slideup实现手机端折叠菜单效果
2017/05/25 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
详解python实现线程安全的单例模式
2018/03/05 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
python单例设计模式实现解析
2020/01/07 Python
Python单链表原理与实现方法详解
2020/02/22 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
自荐信范文
2013/12/10 职场文书
岗位竞聘书范文
2014/03/31 职场文书
公司节能减排倡议书
2014/05/14 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
新闻人物通讯稿
2014/10/09 职场文书
食品药品安全责任书
2015/05/11 职场文书
实习单位意见
2015/06/04 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
python xlwt模块的使用解析
2021/04/13 Python
golang定时器
2022/04/14 Golang