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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
基于css3的属性transition制作菜单导航效果
Sep 01 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
Jul 26 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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程序中的常见漏洞进行攻击
2006/10/09 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js子页面获取父页面数据示例
2014/05/15 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
jQuery随机密码生成的方法
2015/03/09 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
vue之nextTick全面解析
2017/05/17 Javascript
vue组件Prop传递数据的实现示例
2017/08/17 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
深入浅析python的第三方库pandas
2020/02/13 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Python异常处理机制结构实例解析
2020/07/23 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
JAVA软件工程师测试题
2014/07/25 面试题
大学生收银员求职信分享
2014/01/02 职场文书
有创意的广告词
2014/03/18 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
环保倡议书50字
2014/05/15 职场文书
设计专业自荐信
2014/06/19 职场文书
作风建设年度心得体会
2014/10/29 职场文书
初中中等生评语
2014/12/29 职场文书
大学生自荐书范文
2015/03/05 职场文书