LODOP打印table超宽用省略号带'-'的内容换行问题
前面的博文有div超宽隐藏（LODOP打印超过后隐藏内容样式），还有有table设置超宽隐藏（），此外，还有超宽后用省略号表示的css样式，此文是针对这个样式的。
该样式正常情况下没问题，但是遇到-短线这种英文连接符的时候，会导致换行，换行后隐藏后面的内容，为了宽度固定，可以设置不换行样式，但是浏览器显示正常，lodop可能会有问题。
此问题可以用table里需要的内容嵌套div来解决。
加了居中样式后，-线会可能会变省略号问题：可见本博文的最下方的代码测试代码2和图示2。
测试代码1：
去掉了注释，改为页面文字提示：测试代码相关样式
overflow:hidden 超出隐藏
text-overflow:ellipsis 超出隐藏后的用省略号表示
white-space:nowrap 不换行
word-break: break-all 拆分英文单词如-短线
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
</head>
<body>
<div id="d1">
超出隐藏：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隐藏-->
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;overflow:hidden;">333333333333333333333333333333333333333333333333</td>
</tr>
</table>
<br>
超出隐藏并用省略号表示：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隐藏并用省略号表示-->
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;text-overflow:ellipsis;overflow:hidden;">333333333333333333333333333333333333333333333333</td>
</tr>
</table>
<br>
超出隐藏用省略号，内容有-小短线，变成了两行：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隐藏用省略号，内容有-小短线，变成了两行-->
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;text-overflow:ellipsis;overflow:hidden;">3-3-3333333333333333333333333333333333333333333333</td>
</tr>
</table>
<br>
超出隐藏用省略号，内容有两组-小短线，变成了三行：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!--超出隐藏用省略号，内容有两组-小短线，变成了三行-->
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;text-overflow:ellipsis;overflow:hidden;">3-3-333333333333333table-layout3333333333333333333333333333333</td>
</tr>
</table>
<br>
超出隐藏用省略号，内容有-小短线，设置td不换行样式：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!---->
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">3-3-3333333333333333333333333333333333333333333333</td>
</tr>
</table>
<br>
超出隐藏用省略号，内容有-小短线，设置td不换行样式，并且单词拆分：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!---->
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;word-break: break-all">3-3-3333333333333333333333333333333333333333333333</td>
</tr>
</table>
<br>
超出隐藏用省略号，内容有-小短线，td里加div，并设置不换行。
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" ><!---->
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;"><div style="width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">3-3-3333333333333333333333333333333333333333333333</div></td>
</tr>
</table>
<br>
</div>
<a href="javascript:prn1_preview()">表格宽度是否固定</a><br>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prn1_preview() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("d1").innerHTML);
LODOP.PRINT_DESIGN();
//LODOP.PREVIEW();
};
</script>
</body>
图示1：如图，有些在浏览器中显示正常，但是LODOP预览不正常，解析超文本存在差异，可以更换样式等方式，排查样式，修改样式，实现最后的需要的效果。
如图，浏览器和LODOP预览中样式的差异，除了换行不换行，还有可能存在省略号样式问题，图中的是qq浏览器极速模式下的浏览器样式，和lodop解析引擎是不同的。
在遇到居中样式的时候，有的单元格超过了宽度换行了，设置超出变省略号样式，如果内容里有-短线，lodop预览可能会变成点。
对于这种单元格，可以去掉居中样式，因为它本身内容布满单元格，已经超出了。
方法1：给这个单元格去掉居中样式
方法2：加div，用div控制超出变省略号
以上是目前我测出了的可以的方法，尝试直接加上高度没有效果，其他样式等组合可能也能达到效果，可以实际试验样式。
测试代码 2：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WEB打印控件LODOP</title>
<script language="javascript" src="LodopFuncs.js"></script>
</head>
<body>
<div id="d1">
不加居中样式的：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" >
<tr>
<td style="width:40px;">1</td>
<td style="width:100px;text-overflow:ellipsis;overflow:hidden;">3-3-3333333333333333333333333333333333333333333333</td>
</tr>
</table>
<br>
加了居中样式的：
<table border=1 style="width:140px;height:20px;border-collapse:collapse;table-layout:fixed;" >
<tr>
<td style="width:40px;text-align:center;">1</td>
<td style="width:100px;text-overflow:ellipsis;overflow:hidden;text-align:center;">3-3-3333333333333333333333333333333333333333333333</td>
</tr>
</table>
<br>
改用div的：
<table border=1 style="width:140px;border-collapse:collapse;table-layout:fixed;" >
<tr>
<td style="width:40px;text-align:center;">1</td>
<td style="width:100px;"><div style="width:100px;overflow:hidden;text-overflow:ellipsis;text-align:center;white-space:nowrap;">3-3-3333333333333333333333333333333333333333333333</div></td>
</tr>
</table>
<br>
</div>
<a href="javascript:prn1_preview()">表格宽度是否固定</a><br>
<script language="javascript" type="text/javascript">
var LODOP; //声明为全局变量
function prn1_preview() {
LODOP=getLodop();
LODOP.PRINT_INIT("");
LODOP.ADD_PRINT_HTM(0,0,"100%","100%",document.getElementById("d1").innerHTML);
LODOP.PRINT_DESIGN();
//LODOP.PREVIEW();
};
</script>
</body>
图示2：
LODOP打印table超宽用省略号带'-'的内容换行问题的更多相关文章
- LODOP打印table表格宽度固定-超宽隐藏
之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...
- LODOP打印table不切行TableRowThickNess
不切行的调整方法有三种:1.简单表格,不嵌套合并等,可以用ADD_PRINT_TABLE输出,该 语句不切行,相关博文:LODOP设置超文本不自动分页的方法.2.进入打印设计,调整打印项到合适的高度, ...
- Lodop打印设计界面生成代码带”...(省略)”
Lodop的设计界面中,菜单里的生成代码,如果打印项内容过多,后面会显示”...(省略)”,省略的是打印项的内容值,无论是纯文本还是超文本,都可以用选中打印项-右键-设置属性里找到该打印项的全部值,可 ...
- LODOP表格table简短问答及相关博文
LODOP打印表格超文本输出表格:ADD_PRINT_HTML.ADD_PRINT_HTM.ADD_PRINT_TABLE.ADD_PRINT_TBURL打印表格带页头页尾 参考样例15 http:/ ...
- Lodop打印设计（PRINT_DESIGN）介绍
打印设计(PRINT_DESIGN)界面上方有两栏菜单栏,举例说明(文本框,条码,图形等).(1)第一排最左侧第一个功能,位置移动:控制里面元素微上下左右移动,每次移动一个px.(用于微调,普通调整可 ...
- [简短问答]LODOP如何查看用LODOP打印设计的代码
该博文为图文简短问答,具体详细介绍可查看本博客的相关博文,生成JS代码相关详细博文:Lodop打印设计(PRINT_DESIGN)介绍.Lodop打印设计.维护.预览.直接打印简单介绍.Lodop打印 ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- Lodop打印表格带页头页尾 高度是否包含页头页尾 转载
通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...
- Lodop打印表格带页头页尾 自动分页每页显示头尾
Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...
随机推荐
- 010——MATLAB运行错误跳到下一个循环
(一)MATLAB运行错误跳到下一个循环 :%文件的个数 try %运行的程序放到这里 catch continue%假如上面的没法执行则执行continue,到下个循环 end
- 洛谷 P1199 三国游戏 题解
每日一题 day18 打卡 Analysis 贪心 假如小A先选最大的[5,4],虽然电脑必须选一个破坏, 我们可以理解为5和4都属于小A的,假如后面未被破坏的最大值无论是和5相关还是和4相关,必然还 ...
- 为什么 MySQL 索引要使用 B+树而不是其它树形结构？比如 B 树？
一个问题? InnoDB一棵B+树可以存放多少行数据?这个问题的简单回答是:约2千万 为什么是这么多呢? 因为这是可以算出来的,要搞清楚这个问题,我们先从InnoDB索引数据结构.数据组织方式说起. ...
- PHP安装之configure的配置参数
1.生成环境安装配置如下 要求安装如下库: imagickgdmysqlmysqlimysqlndphalconPharsoapsocketsxwebxsvczipzlib 具体查看 vim php- ...
- 洛谷 P1083 借教室 题解
P1083 借教室 题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借 ...
- AttributeError: module 'tensorflow' has no attribute 'set_random_seed'
anaconda3 python3.7 安装好tensorflow 后出现上面的问题,原因是安装的tensorflow版本是2.0的,所以使用以前的代码tensorflow中的函数不兼容.
- 如何手动安装WordPress主题和插件（Linux）
1. 去官网找到你想使用的插件或主题,并复制下载地址 2. cd到WordPress网站目录下的插件或主题目录下 这里以我的为例: 安装插件:cd /var/www/html/wp-content/p ...
- C# 获取枚举值/获取名字和值
枚举 int 转 枚举名称 public void Test() { //调用 string name1= ConvertEnumToString<ActionLogType>(1); s ...
- redis 业务锁 not exist 模式
背景: 业务核心模块只能提交一次,原实现方案 前端加提交限制.后端加数据库业务逻辑判定,结果失效,api站点部署多台负载,切方法需要强求第三方接口 响应时间较慢 ,故放弃lock. 解决方案:redi ...
- 配置Windows实例NTP服务
本文介绍如何开启和配置Windows NTP服务,保证实例本地时间精确同步. Windows实例NTP服务介绍 目前,所有地域下ECS实例默认采用CST(China Standard Time)时区, ...