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背景下的@font face规则
May 04 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS3不透明度实例讲解
Apr 26 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
24个canvas基础知识小结
Dec 17 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 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
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP反射API示例分享
2016/10/08 PHP
php中static和const关键字用法分析
2016/12/07 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
详解Python3中yield生成器的用法
2015/08/20 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python pandas修改列属性的方法详解
2018/06/09 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
上班玩手机检讨书
2014/02/17 职场文书
签约仪式策划方案
2014/06/02 职场文书
幼儿园秋季开学通知
2015/07/16 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书