Lodop打印控件WEB页面line-height超出隐藏显示的行数和垂直居中
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行高就显示几行, 行高还可以让一行文字在div中垂直居中,如下代码和图示,行高上上下的,在该div中文字距离div上下的距离是相等的。 之前的超出后隐藏的css样式overflow:hidden相关博文:LODOP打印超过后隐藏内容样式、 此外,注意: 2.行高必须大于等于文字大小 测试代码: <div id="d1" style="float:left;"> <div style="width:135px;height:40px;overflow:hidden;line-height:20px;font-size:10px;background-color:#265d19;color:white;"> Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同Javascript扩展语句,主要接口函数如下:</div><!--div的hegiht除以line-height,就是显示的行数,40/20=2行--> <div style="width:135px;height:40px;overflow:hidden;line-height:10px;font-size:10px;background-color:#e88383;color:white;"> Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同Javascript扩展语句,主要接口函数如下:</div><!--div的hegiht除以line-height,就是显示的行数,40/10=4行--> </div> <div id="d2" style="float:left;"> <div style="margin-left:10px;width:135px;height:40px;overflow:hidden;line-height:40px;font-size:10px;background-color:#7edce4;color:white;">Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同Javascript扩展语句,主要接口函数如下:</div><!--div的hegiht除以line-height,就是显示的行数,40/40=1行,该行在div中垂直居中--> <div style="margin-left:10px;width:135px;height:32px;overflow:hidden;line-height:21px;font-size:16px;background-color:#d4e680;">高版本的火狐谷歌不再支持np插件,需要使用c-lodop,可参考官网样例混合部署Lodop控件升级到C-Lodop云打印</div><!--line-height不是font-size的倍数,切文字--> </div> <!--line-height小于font-size,行高小于字体大小 --> <div style="clear:both;margin-top:90px;line-height:10px;font-size:40px;background-color:#7edce4;color:white;">Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印。控件功能强大,却简单易用,所有调用如同Javascript扩展语句,主要接口函数如下:</div> 图示: div的hegiht除以line-height,就是显示的行数 该文章在 2023/9/28 1:32:05 编辑过 |
关键字查询
相关文章
正在查询... |