zoukankan      html  css  js  c++  java
  • line-height超出隐藏显示的行数和垂直居中

    line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行高就显示几行,
    如下面的代码和图示测试的,在div设置了超出隐藏样式后:div是40px,设置行高为20px,div高度可以容纳两个行高,就会显示两行。行高为10px,div可以容纳四个行,就会会显示四行。

    行高还可以让一行文字在div中垂直居中,如下代码和图示,行高上上下的,在该div中文字距离div上下的距离是相等的。

    之前的超出后隐藏的css样式overflow:hidden相关博文:LODOP打印超过后隐藏内容样式

    此外,注意:
    1.行高要是文字大小的倍数
    文字本身的大小,行高不是文字大小的倍数,会出现切割文字的现象,div超出隐藏,会把文字的部分隐藏掉,看起来就像是文字被切割了,这种不是超文本没加载完引起的,还是样式本身导致的文字显示不全,这里div用了背景色,如果是默认的白色,会看起来像是文字没显示全。

    2.行高必须大于等于文字大小
    行高小于文字大小,文字会重叠,行高也是多行文字的行间距,如果行间距比文字还小,自然会重叠起来,造成文字重叠现象。

    测试代码:

    <div id="d1" style="float:left;">
    <div style="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="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;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;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,就是显示的行数
    div的hegiht=line-height,就是一行在div中垂直居中
    line-height不是font-size的倍数,切文字
    line-height小于font-size,文字重叠

  • 相关阅读:
    基于IDEA+Maven+SpringMVC的入门web程序分析(一)
    Spring之路----chapter03 高级装配
    Spring之路---chapter02装配Bean
    Spring之路----Chapter01 Spring之旅
    实用网址-项目的创建、Idea打开Maven项目、Idea打开Eclipse项目
    Git之路-2017年9月8日14:37:01
    Redis入门指南-笔记-进阶
    DenyHosts 阻止SSH暴力攻击
    某cms最新版前台RCE漏洞(无需任何权限)2020-03-15
    通过Joomla的两次RCE漏洞看session反序列化
  • 原文地址:https://www.cnblogs.com/huaxie/p/11445533.html
Copyright © 2011-2022 走看看