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教程之倾斜页面
Jan 27 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
使用css如何制作时间ICON方法实践
Nov 12 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
Apr 22 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常用数组函数介绍
2014/07/28 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
JsDom 编程小结
2011/08/09 Javascript
JsRender for index循环索引用法详解
2014/10/31 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python和c语言的主要区别总结
2019/07/07 Python
使用python绘制温度变化雷达图
2019/10/18 Python
python实现银行实战系统
2020/02/26 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
个人求职信范文分享
2013/12/13 职场文书
高中军训感想800字
2014/02/23 职场文书
护士长竞聘书
2014/03/31 职场文书
小学生新年寄语
2014/04/03 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
付款证明模板
2015/06/19 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android