htmltd文本自动换行,完美解决table中td里面的内容自动换行

完美解决table中td里面的内容自动换行2018-08-03 11:50

对于将td里面的内容自动换行，在很久以前就遇到的了，但是一直没有完美的解决。

今天要打印一个报表，有一列中的内容太长，将table撑得老长实在是影响观感。

于是下决心一定要解决td内容自动换行的问题。

网上有很多说可以解决的，大致有以下几种。

1、在table中加table-layout:fixed;

2、在td中加word-wrap:break-word;word-break:break-all;

但是都能不解决问题。

解决方法如下：

在显示长内容的td里面将内容放在div标签里面。

给div标签加样式

style="width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;"

实例如下： html代码

.warp{width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;}

订单编号	回团日期	买家昵称	宝贝属性	实付款	已收款	成本价(RMB)	接单人
ZH201806262249544298	2018-08-25	XP丐帮帮主	布先生字母印花新品短袖男潮流印花圆领男士上衣	1656.00	80	1300.00	李小洁
ZH201807302154418378	2018-07-31	来不及说123	ins超火的雪纺衬衣女夏季2018韩范新款宽松喇叭袖白色衬衫上衣服	798.00		600.00	陈海川
ZH201807310931228087	2018-07-31	流雨的花	NASO那所北欧铁艺家用大号带盖脏衣篮衣服收纳筐欧式简约脏衣篓	1965.00		1460.00	李胜男
ZH201807261115475879	2018-07-31	吹花风雪abc	防水折叠脏衣篮布艺脏衣篓带盖脏衣服收纳筐北欧家用大号洗衣篮子	3.00		40.00	林杉杉

经测试以上代码可以兼容firefox、谷歌、360浏览器，td里面的内容都能自动换行，至于那些老的浏览器没有测试。

htmltd文本自动换行,完美解决table中td里面的内容自动换行相关推荐

td 内容自动换行 table表格td设置宽度后自动换行
td 内容自动换行 table表格td设置宽度后自动换行控制样式 table { table-layout:fixed; WORD-BREAK:break-all; } td { word-wrap ...
表格(table)中td根据内容长度自动换行
在一些前端的demo中,我们经常会用到表格(table).因为有的内容比较长,所以需要列宽大一些,有的内容比较短,列宽就小一些.但是我们会遇到一个问题,在学校联系方式表里面,联系人电话/电子邮件这两列 ...
winform界面嵌入dwg图纸_完美解决窗体中预览DWG图形(C#版）
看到完美解决VB.NET窗体中预览DWG图形帖子后,用C#代码实现如下: class ViewDWG { struct BITMAPFILEHEADER { public short bfType; ...
完美解决Visio中MathType公式变形的问题以及visio图转pdf之后公式不显示的问题
很多博主说的转换为打印是可以解决公式变形的问题,但是放大后会有些地方模糊.然后我发现啊!!! 插入公式前先插入矩形框,把公式和矩形框组合起来,就可以了,完美解决,不会糊,也不会变形!!!Nice
HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题
1. 执行以下解决方案条件:(这个是原理) ①执行复制方法时所复制文字不能被任何块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制 ...
html复制粘贴的文字自动换行,如何解决Word中粘贴网页上的文字自动换行的现象...
在网页上复制了一段文字,粘贴到Word中的时候,却发现文字自动换行了,好好的一段话被回车在中间断的非常乱,这是什么原因呢,怎么取消Word粘贴时的自动换行呢? 问题出现的原因: 出现这种情况,大多不是 ...
React前端库，table中的每列内容，进行强制换行的解决方法
1.问题描述: 管理系统的前端实现用的是React+ant design,但是React的table,每列的值,如果用<br />或者/r/n 来实现,则还是换行无效.如下图,SN值是多个 ...
table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示
1,设置css样式 <style> table { width: 100%; float: left; table-layout:fixed; width:600px; border:1p ...
完美解决SSM中 java.lang...c3p0/impl/NewProxyResultSet.isClosed()Z is abstract 【插入数据只能插入一条问题】
报错信息如下解决办法在pom.xml文件中修改我们引入的c3p0依赖的jar包: 之前是: <!-- https://mvnrepository. ...

htmltd文本自动换行,完美解决table中td里面的内容自动换行

htmltd文本自动换行,完美解决table中td里面的内容自动换行相关推荐

最新文章

热门文章