超文本css样式换行

之前有关于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浏览器的极速模式相似,但是大概是浏览器默认字体大小有差异,导致了字体和换行都有差异,所以显示出了三种效果。三种效果我分别用三种色块区域划分出来。

转载于:https://www.cnblogs.com/huaxie/p/11281082.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569030.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

详述白盒测试逻辑覆盖法的语句覆盖及其缺点

语句覆盖的定义&#xff1a; 语句覆盖就是设计若干个测试用例&#xff0c;使被测试程序中的每条可执行语句至少执行一次。比如说我们测试用例里面有10个语句&#xff0c;那么这10个语句都要被测试到。 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01;…

HDU - 6183 Color it 2017广西邀请赛(线段树)

题目链接 题意&#xff1a; 有四种操作 0操作 清空所有点 1操作 在&#xff08;x,y&#xff09;处插入一个带颜色的点 2 操作统计(1~x)(y1~y2&#xff09;这个范围的不同的颜色数 3 结束 思路&#xff1a; 颜色数只有51个 我们可以建51颗线段树 因为每次查询都是1~x范围的 所以…

详述白盒测试的逻辑覆盖法的判定覆盖及其优缺点

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 详述白盒测试的逻辑覆盖法的判定覆盖及其优缺点&#xff1…

详述白盒测试的逻辑覆盖的条件覆盖及其优缺点

条件覆盖详述白盒测试的逻辑覆盖的条件覆盖及其优缺点&#xff1a;条件覆盖的定义&#xff1a;与判定覆盖的区别&#xff1a;条件覆盖率&#xff1a;测试实例&#xff1a;代码&#xff1a;优缺点&#xff1a;详述白盒测试的逻辑覆盖的条件覆盖及其优缺点&#xff1a; https://b…

详述白盒测试的逻辑覆盖法的条件判定覆盖及其优缺点

条件判定覆盖的定义&#xff1a; 设计足够多的测试用例&#xff0c;使被测程序中每个判定的每个条件的所有可能取值&#xff08;真假&#xff09;至少执行一次&#xff0c;并且每个判定的所有可能&#xff08;真假&#xff09;分支也至少执行一次 。通俗来讲&#xff0c;就是条…

利用可视化软件navicat对mysql进行语句查询的使用(增删改查)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 增&#xff1a;insert 语法&#xff1a;INSERT [INTO] 表…

C# 3.0入门系列(三)

从本节开始&#xff0c;笔者将会和大家一起开始体验dlinq了。前面我们准备了数据库&#xff0c;也对数据库之间的关系做了初步的了解。有了数据库之后&#xff0c;数据和对象是一个什么样的关系呢&#xff1f;从dlinq的设计来看&#xff0c;它主要是为了解决data!objects 的问题…

(Navicat for MySQL)利用可视化软件navicat操作mysql,创建一个表举例(基础)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 步骤&#xff1a; 首先我们打开navicat:先点击下图中的表…

eclipse中egit插件使用

这篇文章当时制作有点粗糙&#xff0c;建议阅读升级版&#xff1a;eclipse中egit插件使用--升级版 使用git作为项目的代码管理工具现在是越来越火&#xff0c;网上有各种各样的文章、博客、讨论&#xff0c;其中以命令行居多。使用eclipse作为开发工具的人也是很多&#xff0c;…

以VMware workstation15.5.2pro为例如何新建虚拟机,安装镜像文件(最新)

需要用到VMware软件与镜像文件:链接:https://blog.csdn.net/hanhanwanghaha/article/details/105674470 第一步:打开VMware,点击创建新的虚拟机 第二步:选择典型,点击下一步 第三步:选择安装程序光盘镜像文件,并且下面提示已经检测到,再点击下一步

续--Flask, Django - 区别

1. 目录结构 参考&#xff1a;https://blog.csdn.net/yang9520/article/details/79740374 中文文档&#xff08;http://docs.jinkan.org/docs/flask/&#xff09;一般情况下&#xff0c;Django很系统、统一。Flask项目目录风格不同一&#xff0c;即使用上了蓝图。 2…

VMware workstation 15.5.2及镜像文件下载

链接: https://pan.baidu.com/s/175imV_FeTFcitFHay07vHQ 提取码: ayh3 希望对大家有用&#xff01; https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出…

无法连接虚拟设备 floppy0,因为主机上没有相应的设备。 您要在每次开启此虚拟机时都尝试连接此虚拟设备吗?

如果出现以上情况&#xff0c;应该是没有连接镜像文件&#xff0c;在添加镜像文件的地方添加镜像文件就可以了 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&…

CentOS 6.5 下安装 Kibana5

1. 导入Elastic PGP Key 执行命令 rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch 2. 安装Kibana的rpm库使用 ll /etc/yum.repos.d/ 查看当前机器上已经安装的rpm库&#xff0c;如果没有Kibana的话需要创建。用vim创建新的repo文件&#xff0c;vim /etc/yu…

详述白盒测试的逻辑覆盖法的条件组合覆盖及其优缺点

概念&#xff1a; 设计足够多的测试用例&#xff0c;使被测程序中每个判定的所有可能的条件取值组合至少执行一次。 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出…

详述白盒测试的逻辑覆盖的路径覆盖及其优缺点

详述白盒测试的逻辑覆盖的路径覆盖及其优缺点定义&#xff1a;与其他覆盖的关系&#xff1a;路径覆盖率&#xff1a;测试用例&#xff1a;优缺点&#xff1a;定义&#xff1a; https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&…

Jmeter下载安装详细步骤(最新)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 官网地址 http://jmeter.apache.org/ 步骤 1.点击Downl…

怎样使用navicat将mysql的数据表导出保存(转储SQL文件)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 1.点击你所创建的表&#xff0c; 2.右键点击转储SQL文件&…

Java如何连接mysql数据库详解(代码)

工具&#xff1a; https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; eclipseMysqlMysql驱动链接&#xff1a;…

docker 笔记

---恢复内容开始--- 安装 win10专业版 开启Hyper-V 安装docker 下载地址&#xff1a;https://store.docker.com/editions/community/docker-ce-desktop-windows vs2017 直接添加 项目docker docker stop zeekodb //停止这个容器 docker start zeekodb //运行这个容器 首先你要…