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 3D位移translate效果实例介绍
May 03 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
May 13 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
关于html选择框创建占位符的问题
Jun 09 HTML / CSS
html form表单基础入门案例讲解
Jul 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/01/02 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
百度地图api如何使用
2015/08/03 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python如何调用百度识图api
2020/09/29 Python
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
什么是lambda函数
2013/09/17 面试题
介绍一下except的用法和作用
2015/01/22 面试题
服装设计师职业生涯规划范文
2014/02/28 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
Mysql基础之常见函数
2021/04/22 MySQL