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背景_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
Jul 11 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
CI框架常用函数封装实例
2016/11/21 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
angular 数据绑定之[]和{{}}的区别
2018/09/25 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
YUV转为jpg图像的实现
2019/12/09 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
简历自荐信
2013/12/02 职场文书
竞选部长演讲稿
2014/04/26 职场文书
初中教师个人总结
2015/02/10 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
环保建议书作文300字
2015/09/14 职场文书