前面的博文有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超宽用省略号带'-'的内容换行问题的更多相关文章

  1. LODOP打印table表格宽度固定-超宽隐藏

    之前有博文介绍关于超出div隐藏内容的:LODOP打印超过后隐藏内容样式里面提到了overflow:hidden;控制超出后隐藏,但是前面那篇用的是div,如果是在table中,由于table默认的t ...

  2. LODOP打印table不切行TableRowThickNess

    不切行的调整方法有三种:1.简单表格,不嵌套合并等,可以用ADD_PRINT_TABLE输出,该 语句不切行,相关博文:LODOP设置超文本不自动分页的方法.2.进入打印设计,调整打印项到合适的高度, ...

  3. Lodop打印设计界面生成代码带”...(省略)”

    Lodop的设计界面中,菜单里的生成代码,如果打印项内容过多,后面会显示”...(省略)”,省略的是打印项的内容值,无论是纯文本还是超文本,都可以用选中打印项-右键-设置属性里找到该打印项的全部值,可 ...

  4. LODOP表格table简短问答及相关博文

    LODOP打印表格超文本输出表格:ADD_PRINT_HTML.ADD_PRINT_HTM.ADD_PRINT_TABLE.ADD_PRINT_TBURL打印表格带页头页尾 参考样例15 http:/ ...

  5. Lodop打印设计（PRINT_DESIGN）介绍

    打印设计(PRINT_DESIGN)界面上方有两栏菜单栏,举例说明(文本框,条码,图形等).(1)第一排最左侧第一个功能,位置移动:控制里面元素微上下左右移动,每次移动一个px.(用于微调,普通调整可 ...

  6. [简短问答]LODOP如何查看用LODOP打印设计的代码

    该博文为图文简短问答,具体详细介绍可查看本博客的相关博文,生成JS代码相关详细博文:Lodop打印设计(PRINT_DESIGN)介绍.Lodop打印设计.维护.预览.直接打印简单介绍.Lodop打印 ...

  7. Lodop打印表格带页头页尾 高度是否包含页头页尾

    通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...

  8. Lodop打印表格带页头页尾 高度是否包含页头页尾 转载

    通过设置TableHeightScope,可以实现对ADD_PRINT_TABLE,表格带页头页尾,查看本博客另一篇博文:Lodop打印表格带页头页尾 自动分页每页显示头尾 超文本超过打印项高度,会自 ...

  9. Lodop打印表格带页头页尾 自动分页每页显示头尾

    Lodop中有两种专门给超文本表格的方式,ADD_PRINT_TABLE和ADD_PRINT_TBURL,该方式只能用于单个表格,表格外的内容不显示,是专门用于打印html超文本表格的.使用这两个语句 ...

随机推荐

  1. commons-dbutils 字段名称转换，支持驼峰字段名

    你能遇到的问题,只要是普遍存在的,大家都会遇到,那么,就一定有现成的解决方案. 在阅读 commons-dbutils 的文档时, BeanHandler 的第二个参数可以达到这个目的.只需传入一个实 ...

  2. Fiddler拦截请求

    bpu (breakpoint url ) Create a request breakpoint for URIs containing the specified string. Setting ...

  3. jumpserver 安装

    # CentOS 7 安装jumpserver $ setenforce 0 # 可以设置配置文件永久关闭$ systemctl stop iptables.service$ systemctl st ...

  4. cube.js 学习（二）cube.js与 graphql2chartjs的比较

    cube.js 是目前看到从设计以及理念上很不错的数据分析事件,graphql2chartjs 是hasura graphql-engine 团队开发 的一个类库基于graphql,以下做一些比较 c ...

  5. Firefox修復QQ快速登錄

    中了一次毒,然後火狐裏面就不能用QQ的快捷登錄了,後找到修復方法: 將QQ的四個文件放入火狐的插件文件夾裏面即可. 1.QQ文件目錄: C:\Program Files (x86)\Tencent\Q ...

  6. docker使(二）—发布node应用镜像和容器

    应用在本地是已经ok的了,现在将node应用放进docker容器里面 获取node镜像 docker pull node 编写Dokerfile # 根据node镜像开始创建新的镜像(可以加上:tag ...

  7. [SDOI2009][BZOJ 1226]学校食堂

    Description 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人口味也不一定相同,但每个人的口味都可以 ...

  8. HDU 6086 Rikka with String ——（AC自动机 + DP）

    这是一个AC自动机+dp的问题,在中间的串的处理可以枚举中断点来插入自动机内来实现,具体参见代码. 在这题上不止为何一直MLE,一直找不到结果(lyf相同写法的代码消耗内存较少),还好考虑到这题节点应 ...

  9. Java IO管道流

    import java.io.IOException; import java.io.PipedInputStream; import java.io.PipedOutputStream; publi ...

  10. NOIP（划掉）CSP2019一轮知识点

    今年似乎变动很大呢…… 去年总结的 历年真题 以下标题中打*的是我认为的重点内容 *一.关于计算机 (一)计算机组成 计算机的工作原理跟人的大脑很相似,而且还是大脑功能的延伸,所以习惯上叫它电脑. 硬 ...