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="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,就是显示的行数
div的hegiht=line-height,就是一行在div中垂直居中
line-height不是font-size的倍数,切文字
line-height小于font-size,文字重叠
line-height超出隐藏显示的行数和垂直居中的更多相关文章
- css让文字显示特定行数,多余的显示省略号
/*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...
- eclipse怎么显示代码行数
熟悉java开发的朋友们肯定有这样的经验,那就是在用eclipse进行java开发的时候,没有显示代码的行数,这并不利于我们进行程序的调试.今天,小编就来教大家eclipse怎么显示代码行数 ...
- eclipse显示代码行数
最近做的手机APP正在进行最后一部分了,在一个类中估计要写上千行代码,来回的拉动滚动条太麻烦了,于是发现为什么我得eclipse不显示代码行数呢 其他C什么的编译器都显示的. 于是百度了一下,一下子 ...
- CSS——文本超出隐藏显示省略号
文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...
- 【转】Eclipse Console 加大显示的行数,禁止弹出
转载地址:http://blog.csdn.net/leidengyan/article/details/5686691 Eclipse Console 加大显示的行数: 在 Preferences- ...
- 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏
项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...
- css文本超出隐藏显示省略号
p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...
- css文本超出隐藏 显示三个点
文本超出显示三个点一般分两种情况 一,单行文本超出隐藏 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; 二,多行文本超出隐藏 ...
- css超出隐藏显示省略号怎么设置?
当我们在进行网页前端开发的时候,一般获取文章标题,然后一行一行的显示.但是当标题过长的时候,就会造成换行显示.还有显示部分文本信息时,如果全部显示就过于繁琐,会带来不会的网页体验感.虽然我们可以使用o ...
随机推荐
- SIGAI机器学习第二十三集 高斯混合模型与EM算法
讲授高斯混合模型的基本概念,训练算法面临的问题,EM算法的核心思想,算法的实现,实际应用. 大纲: 高斯混合模型简介实际例子训练算法面临的困难EM算法应用-视频背景建模总结 高斯混合模型简写GMM,期 ...
- Kubernetes 学习13 kubernetes pv pvc configmap 和secret
一.概述 1.我们在pvc申请的时候未必就有现成的pv能正好符合这个pvc在申请中指定的条件,毕竟上一次的成功是我们有意设定了有一些满足有一些不满足的前提下我们成功创建了一个pvc并且被pod绑定所使 ...
- UVA 11019 Matrix Matcher ( 二维字符串匹配, AC自动机 || 二维Hash )
题目: 传送门 题意: 给你一个 n * m 的文本串 T, 再给你一个 r * c 的模式串 S: 问模式串 S 在文本串 T 中出现了多少次. 解: 法一: AC自动机 (正解) 670ms 把模 ...
- JS学习之--比较两个Object数组是否相等
一.问题 在js中是不能直接用“==”或者“===”来计算两个数组是否相等的,那么就需要对数组的值进行比较: 二.次解决方案 对于比较两个数组次要的方法有如下几种,为什么说是次要解决方案呢?因为它不能 ...
- 洛谷 P2872 [USACO07DEC]道路建设Building Roads 题解
P2872 [USACO07DEC]道路建设Building Roads 题目描述 Farmer John had just acquired several new farms! He wants ...
- 如何使用git把本地代码上传到github
Git Bash Here git init git add . git commit -m '说明' git remote add origin https://github.com//.git g ...
- Codeforces 1239E. Turtle 折半
原文链接www.cnblogs.com/zhouzhendong/p/CF1239E.html 前言 咕了这么久之后,我的博客复活了! 题解 结论1 存在一个最优解\(A\)数组,满足\(\foral ...
- Note_4.7
2019/4/7 奇奇怪怪的笔记 狄利克雷卷积 \(μ∗1=ϵ\),莫比乌斯反演 \(Id=φ∗1⇒φ=μ∗Id\) \(d=1∗1⇒1=μ∗d\) \(σ=Id∗1⇒Id=μ∗σ\) \(σ=φ∗ ...
- avalon如何用年月日的方式输出..
在avolon里面的http://avalonjs.coding.me/filter.html 可以找到与date相关的转化,如果是要转化为年月日的形式,看下面的代码: <span style ...
- Vue.js中 watch的理解以及深度监听
如代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type=" ...