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 相关文章推荐
10个很棒的 CSS3 开发工具 推荐
May 16 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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
967 个函式
2006/10/09 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
CURL状态码列表(详细)
2013/06/27 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
js实现图片360度旋转
2017/01/22 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
微信小程序左滑删除实现代码实例
2019/09/16 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python获取中文字符串长度的方法
2018/11/14 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Python自动化操作实现图例绘制
2020/07/09 Python
商场中秋节广播稿
2014/01/17 职场文书
创先争优承诺书范文
2014/03/31 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
铁路安全反思材料
2014/12/24 职场文书
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android