之前有关于LODOP中纯文本换行的相关博文:Lodop纯文本英文-等符号自动换行问题
纯文本的遇到不拆分的单词的时候,可以通过LODOP 语句设置允许标点溢出,且英文单词拆开。
超文本需要通过css样式控制,相关博文:Lodop打印控件传入css样式、看是否传入正确样式
Lodop是基于本机windows底层引擎进行渲染解析的,与ie调用的引擎一致,注意调用的css样式是否支持问题,通过调试样式,更换样式等,达到需要的效果。
关于table中不换行隐藏等相关博文:LODOP表格table简短问答及相关博文

在div中,即使设置div的宽度,由于样式原因,也可能会超出,甚至超出自己想要的打印区域,也可能造成打印不全。
有背景色会更加清楚,这里给div加了背景色,只设置了宽度,高度按照内容自适应。
最后是是三个div,div加的是背景图,中间的div是是条状平铺,实现高度按照内容。

第一个div:只加了宽度和背景色(word-break和word-wrap默认值 normal)
第二个div:加了word-break:break-all;
第三个div:加了word-wrap:break-word;
第四个区域(三个div):中间的div加了加了word-break:break-all;(另外div两个是上边的图片,和下边的图片高度都是10px)

代码:

<div id="d1">
<div style="width:100px;background-color:#00ff00;">尽量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下载地址 </div><br>
<div style="width:100px;background-color:#db7d7d;word-break:break-all;">尽量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下载地址 </div><br>
<div style="width:100px;background-color:#45e3d2;word-wrap:break-word;">尽量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下载地址 </div><br>
<div style="background-image:url(images/top1.jpg);height:10px;margin-left:0px;width:100px;clear:both;"></div>
<div style="background-image:url(images/mid.jpg);margin-left:0px;width:100px;word-break:break-all;">尽量使用最新版Lodop和c-lodop。http://www.c-lodop.com/download.html最新版下载地址</div>
<div style="background-image:url(images/bot.jpg);height:10px;margin-left:0px;width:100px;"></div>
<br>
</div>

图示:由于只设置了宽度,内容是否换行,也会导致行数的差异,导致div的高度不同。PS:那个用图片平铺的只是中间,上下边框的条状图都是10px。

注意lodop不输出css背景图,可以输出背景色,所以那个图片平铺的会失去背景图(相关博文:Lodop打印控件不打印css背景图怎么办)。
注意Lodop是基于本机windows底层引擎进行渲染解析的,与ie调用的引擎一致,所以如果用lodop打印,注意css样式解析的不同,在ie下查看效果。
例如,同样的代码,在qq浏览器极速模式和兼容模式下的效果是不同的:

这是某版本的qq浏览器和火狐浏览器测试的,qq浏览器的极速模式和兼容模式内核不同,lodop中效果类似兼容模式。
火狐浏览器的样式和qq浏览器的极速模式相似,但是大概是浏览器默认字体大小有差异,导致了字体和换行都有差异,所以显示出了三种效果。三种效果我分别用三种色块区域划分出来。

超文本css样式换行的更多相关文章

  1. CSS样式 换行

    强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...

  2. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  3. Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

      H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现, ...

  4. css样式自动换行/强制换行

    写样式时遇到的英文字符超出容器问题,度娘后了解下列知识,与大家分享,同时以便自己日后回顾. 一.自动换行问题 正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大. 下面介绍的是CSS如何 ...

  5. css中换行与不换行的样式

    常见的css样式分为换行与不换行两种需求 1.不换行显示省略号 text-overflow:ellipsis; white-space:normal; 2.换行自适应 word-break: brea ...

  6. LODOP打印超文本字符串拼接2 单选选择css样式表格

    之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...

  7. css 样式 文字过长 换行处理方法

    css强制换行.强制不换行及自动换行的写法 css强制不换行 div{white-space:nowrap;} css自动换行 div{ word-wrap: break-word; word-bre ...

  8. CSS样式----图文详解:css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  9. HTML标记语言和CSS样式的简单运用(Nineteenth Day)

    曾经励志下去要坚持把每天所学的知识记录下来,可是坚持了几天后,就觉得自己坚持不下去了....这几天自己好好的想了想,觉得不能坚持也得要坚持,因为要对自己负责,所以得学会逼着自己去做,只有这样才能把一件 ...

随机推荐

  1. img src防缓存

    //加时间戳防缓存 var imgurl = "/pcms/headImg/${sessionScope.accountInfo.accountId}_cut.jpg?time=" ...

  2. Acwing P288 休息时间 题解

    Analysis 首先假设一天的第N小时与后一天的第一个小时不相连, 这种情况下DP转移比较好想 dp[i][j][0/1]dp[i][j][0/1]表示 考虑一天的前i个小时,已经休息了j小时,且第 ...

  3. 对数据仓库ODS DW DM的理解

    原文链接:https://www.jianshu.com/p/72e395d8cb33 今天看了一些专业的解释,还是对ODS.DW和DM认识不深刻,下班后花时间分别查了查它们的概念. ODS——操作性 ...

  4. PureComponent下setstate不重新渲染

    https://blog.csdn.net/zhangheli123456/article/details/85053210 可以将  PureComponent 换成React.Component ...

  5. CF696B Puzzles 概率期望

    有一棵树,共有 $N$ 个节点,他会使用下列 $DFS$ 算法对该树进行遍历: starting_time是一个容量为n的数组current_time = 0dfs(v): current_time ...

  6. Luogu5591 小猪佩奇学数学 【单位根反演】

    题目链接:洛谷 \[ Ans=\frac{1}{k}(\sum_{i=0}^n\binom{n}{i}p^ii-\sum_{i=0}^n\binom{n}{i}p^i(i \ \mathrm{mod} ...

  7. 各种DTO类最好有 无参数的构造方法

    以一下这个类为例 @Getter @Setter @ToString class Person { private String s; public Person(String s) { this.s ...

  8. 【随记】SQL Server配置管理器”远程过程调用失败“的问题解决

    打开配置管理器时出现如下错误: 问题原因: 在电脑上安装vs2012.vs2013,vs2015.vs2017.vs2019时会安装[Express LocalDB] 解决方案: 卸载所有[XXXLo ...

  9. hive(3)HiveQL数据定义

    HiveQL与传统SQL区别 HiveQL是Hive的查询语言.与mysql的语言最接近,但还是存在于差异性,表现在:Hive不支持行级插入操作.更新操作和删除操作,不支持事物. 基本语法 数据库操作 ...

  10. 单点登录 sso -- cas CAS 原理 流程 分析

    Yelu大学研发的CAS(Central Authentication Server) 下面就以耶鲁大学研发的CAS为分析依据,分析其工作原理.首先看一下最上层的项目部署图: 部署项目时需要部署一个独 ...