表格处理：换行还是不换行？
|
在对表格的排版中经常要遇到换行或者不换行的处理； 不换行：在<td>中加上nowrap,则单元格中的内容总不换行； 换行： 1。按字符换行：在<td>中加上 style="word-break:break-all" 如 <TD width="100" style="word-break:break-all"><TD> 则在表格内容宽度超过100时，自动强制换行； 2。按单词换行： 把style="word-break:break-all"改为style="word-break:break-word"即可，在这种情况下，不会把单词拆开； |
附：IE与firefox使用对比
对于div
1.（IE浏览器）white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
eg.
<div id="wrap">ddd1111111111111111111111111111111111</div>
效果：可以实现换行
2.（Firefox浏览器）white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
eg.
<div id="wrap">ddd1111111111111111111111111111111111111111</div>
效果：容器正常，内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed；
eg.
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap
eg.
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80">
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
效果：两个td均正常换行
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
eg.
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
这里单元格宽度一定要用百分比定义
效果：正常显示，但不能换行（注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果）
表格处理：换行还是不换行？相关推荐
- antd 能自适应吗_Antd表格滚动 宽度自适应 不换行的实例
我就废话不多说了,大家还是直接看代码吧~ className={styles.table} rowKey={(record) => record.key} columns={columns} d ...
- 在EXCEL表格中如何进行快速换行
在EXCEL表格中如何进行快速换行 目录 在EXCEL表格中如何进行快速换行 方法一:第一步,选中要调整的单元格,点击右键选择"设置单元格格式" 第二步,选择对齐,勾选自动换行,完 ...
- html表格单元格换行属性,CSS对表格单元格强制换行和不换行
CSS对表格单元格强制换行和不换行 互联网 发布时间:2008-10-17 19:28:28 作者:佚名 我要评论 CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不 ...
- 表格中的td内容换行显示
需求:将表格中td内容的换行显示 解决办法:将表格中的数据用 div标签包裹,并添加如下属性: white-space:normal; word-break:break-all; word-wrap: ...
- 在Excel表格中进行字符串拼接换行
string_agg(expression, delimiter) 直接把一个表达式变成字符串 array_agg(expression) 把表达式变成一个数组 一般配合 array_to_strin ...
- html语言中的强制性换行是,html中的div、td 、p 等容器内强制换行和不换行的实现方法...
p.td .p 等容器内强制换行和不换行,在某些情况下还是比较实用的,下面本文整理了一些相关方面的知识,并有具体的实现方法,需要的朋友可以参考下 1.强制不换行,同时以省略号结尾. 代码如下: 你好朋 ...
- div、p、td 的强制不换行及强制换行
关于强制不换行.强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器.各种标签等情况,以致不兼容,所以我再来说说.由于 div 和 p 在本文的讨论中,效果相同,所以省略 ...
- python去除换行_python去除换行
广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 压缩后最长不可超过65535字节(去除空格,换行,制表符等无意义字符)注:接入银 ...
- CSS 强制换行和禁止换行强制换行 和禁止换行样式
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
最新文章
- 【组队学习】【23期】Datawhale集成学习（上）
- AI大觉醒：图灵奖得主Bengio称AI将产生意识，未来机器学习核心是注意力机制
- Http协议处理器——Http11Processor
- Android系统运行库分为,Android系统架构
- 微软新版 Edge 浏览器叫板 Chrome！
- 软件测试---正交试验法
- SpringApplication.run方法分析
- Arcgis制作行政区划矢量文件(shp格式)
- 全英文文献翻译 | 遥感技术在绘制中国与东南亚地区岩溶地质的系列地图中的应用
- python对文件进行zip和rar格式的压缩和解压缩（亲测，可用）
- PX4Flow使用操作
- C语言_99 乘法表
- SVCHOST启动服务实战
- Hadoop名词解释
- H264 数据帧头分析
- 2-4 调整名字大小写
- 如何在linux下安装rar软件,Linux下安装使用RAR压缩软件的方法
- 计算机考研专业课各题分占比,考研计算机常见的6个问题!
- 钉钉企业内部开发工具配置
- sql dateadd 和datediff的用法