超文本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
超文本css样式换行相关推荐
- css样式换行缩进技巧
修改前 修改后 padding-left 与 text-indent 属性(重要) <!DOCTYPE html> <html lang="en" ...
- css文本换行_CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法 1)).首行缩进文本 <div style='text-indent:2em'& ...
- css 不换行_CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法 1)).首行缩进文本 2)).文本对齐方式 3)).字间距 4)).文本间距 5)). ...
- CSS样式自动换行(强制换行)
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元 ...
- 使用css样式替代v-html完成回车换行
我们一般是通过正则表达式配合v-html把接口给的回车换行符改成换行标签,今天给大家看一种通过css样式来实现这一效果的例子. text.replace(/([.\n\r]+)/g, '<br/ ...
- vscode中设置css样式里让逗号不换行
vscode中css样式里给多种属性同时设置样式时应该是这样的, 但是我格式化后却变成了这个样子,看着很不舒服,搜索了其他一堆在setting.json中配置的方法,结果都不管用,最后发现可能是Bea ...
- Html基本标签与CSS样式基本使用
一.HTML语言 1.什么是HTML语言 HTML(英文Hyper Text Markup Language的缩写)中文译为"超文本标签语言",主要是通过HTML标签对网页中的文本 ...
- java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
- html标签元素中定义样式表的属性名是,HTML标签属性与CSS样式
定义:超文本标记语言 Hypetext Markup Language 特点: 不需要编译,直接由浏览器执行 是一个文本文件 必须用htm或html作文件后缀 对大小写不敏感,HTML或html都可以 ...
最新文章
- SAP直接踢人下线 SM04
- 高等数学:e的-t平方次方求积分
- Dotnet Core使用特定的SDKRuntime版本
- Python+pyplot绘制带文本标注的柱状图
- Windows系统过滤病毒功能吗
- 增值税计算机模拟纳税申报,增值税纳税申报系统中的CBR方法实现
- MCGrating光栅设计软件
- 在微软官方网站”满速”下载Windows10最新系统镜像方法。
- 手把手教你制作油管上30万播放的动态登录页面效果
- JAVA 实现图片原比例无损压缩
- 【数据结构】--队列之循环队列
- redis的主从同步及高可用集群
- 戴尔笔记本,快捷键无法调节屏幕亮度,有图标显示,就是没有调节效果
- 一篇文章学会二进制的运算以及原码、反码、补码
- 2018-1-4 Javascript实例演示:
- 好扑科技结合区块链行业发展趋势,重磅推出“好扑区块链合伙人”计划
- 自动进行统计分析的工具
- 申请副高职业学校计算机教师工作总结,申报中学高级教师职称个人工作总结
- KT404A芯片使用手册_4.参考电路
- HDFS的基本shell命令操作
热门文章
- 从numpy里加载_PyTorch强化:01.PyTorch 数据加载和处理
- mysql数据库栏目_MySQL的一些小技巧(持续更新) - mysql数据库栏目
- OpenCV Mat基础认知感
- Kotlin plugin should be enabled before ‘kotlin-android-extensions‘
- 单向队列、双端队列、栈的模型实现
- linux下tomcat部署java web项目_求助帖 linux服务器 tomcat部署javaweb项目问题
- python中end 1 意思_python中“end=”是什么意思?_后端开发
- iPhone清理喇叭灰尘_iphone正确清理扬声器灰尘的方法
- 键盘与鼠标器是微型计算机上最常用的,2016年职称计算机考试WindowsXP考前预测试题5...
- 猜拳游戏html,JavaScript中实现猜拳小游戏