div css每行文字显示一半 同时文字字体重叠显示不全解决方法

CSS DIV布局中出现单行或多行文字的每行文字内容不能显示全,上下行文字有一点点重叠现象,文字字体只显示一半解决方法,在低版本IE特别明显文字字体显示不全,在谷歌浏览器等高版本IE浏览器测试还好些。

新手布局时候特别爱出现DIV盒子里文字字体显示不完整,音乐沙发甚至上下行文字有一点重叠现象。

css字体文字重叠显示不完整重叠字体
字体文字重叠显示不完整同时有重叠重合效果截图

在DIV+CSS布局中造成这种字体显示不全,音乐沙发显示一半同时多行文字有一点点重叠情况原因:
css行高小于CSS字体大小

意思:在CSS布局中设置字体文字大小值大于行高值。

以上截图对应HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIVCSS5实例</title>
<style>
.divcss5{ line-height:16px;font-size:22px}
</style>
</head>
<body>
<div class="divcss5">
测试内容显示不完内容音乐沙发<br />
DIVCSS5实例文字显示一半<br />
DIVCSS5实例文字不能显示完整
</div>
</body>
</html>

看出“class=”divcss5””对应CSS设置行高css line-height设置16px,而字体大小css font-size设置为22px,明显字体大小为22px大于css行高16px。

解决方法:
本案例如果字体大小不改变情况下,将line-height的值设置大于或等于22px即可解决

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIVCSS5实例体感音乐沙发</title>
<style>
.divcss5{ line-height:22px;font-size:22px}
</style>
</head>
<body>
<div class="divcss5">
测试内容显示不完内容<br />
DIVCSS5实例文字显示一半<br />
DIVCSS5实例文字不能显示完整
</div>
</body>
</html>

这里代码line-height的值设置为22px音乐沙发(只需设置line-height大于等于22px即可),刚好和字体大小值保持一致。这样即可很好解决多行文字有重叠重合现象同时也解决字体显示不完整。

div css解决字体显示不完整,重叠现象截图
css解决字体显示不完整,重叠现象截图

总结:
终极最简单解决DIV CSS布局中多行文字显示不全有重叠问题,最简单方法设置line-height的值大于或等于字体大小值即可。

div css每行文字显示一半 同时文字字体重叠显示不全解决方法

时间: 2024-12-29 11:34:51

div css每行文字显示一半 同时文字字体重叠显示不全解决方法的相关文章

Visual Studio 打开解决方案后 弹出框显示 &quot;正在打开文件...&quot; 迟迟没反应 的解决方法

Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 "正在等待分析完成..." 提示. 刚开始,我以为是VS插件问题,因为我刚安装了一个插件后,重启VS,打开解决方案就出现这个问题了,所以我以为是VS插件问题. 后来我把VS插件通通卸载了,把/ResetAddin /ResetSkipPkgs /ResetSettings 之类的deve

AFNetworking 显示不支持“Content-Type:text/plain”的解决方法

首先来看默认使用:(AFNetworking2.2) 这时出现下列错误: 这个错误是AFNetworking报出的,实际上文件已经上传成功,服务器返回了正确的响应,可用fiddler抓包查看. 默认情况下AFHTTPRequestOperationManager 对返回的数据采取JSON解析,并且会先判断Content-Type的值是不是"text/json",本次文件上传服务器返回的是"text/plain",所以会出现上面的错误.导致success块语句不能执行

“网站内容可以显示但在页面底部提示错误”的解决方法

“网站内容可以显示但在页面底部提示错误”的解决方法 今天阿D遇到一个问题,客户网站内容可以正常访问,但是网站尾部都出现数据库等一大推错误提示,如下图 起初以为是网站权限问题,设置好权限,还是提示这个错误,然后又去纠结数据库文件和数据库配置文件是否修改好,都检查无误,依旧提示这个错误,最后根据那个warning的路径,发现tplcache 下好多缓存文件,然后把这些在这个目录下新建个目录,把所有缓存文件拖进新建的那个目录,再次访问,就正常了 总结:网站可以正常打开,多了一堆后缀,首先要去看错误提示

head标签中的title,link,meta等的元素错位显示到body里面去了的完美解决方法

问题展现就像上图所示,head中什么都没有,head中的标签全部错位到body中显示,在页面的直观表现就是无故多处一行空白,很多人觉得这是编码者没有写好闭合标签的问题,嗯,是有可能,但不说现在的浏览器大都能自动补全未闭合标签,未写闭合标签也不至于让head中的内容完全移步到body中去吧.... 解决方法: 这个问题其实是由编码格式引起的,没错,就是BOM的问题,选一个比较高级的编辑器,个人推荐Notepad++,打开后选择 格式 选择以无BOM格式编码保存文档,然后就可以了. 嗯,就是这样子,

DIV CSS鼠标经过悬停在图片上时图片上方显示文字(转)

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 纯div+css实现第一张图片没有文字内容,鼠标悬停时出现第二张图那样效果 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们设置一个盒子对象,并且将图片使用style标签内设置为CSS背景图片,同时设置该对象ht

WPF4文字模糊不清晰、边框线条粗细不一致的解决方法

软件测试过程中发现在一台1600*900的分辨率电脑上文字模糊,甚至某些个文字出现压缩扭曲 经过实践,发现按下面方法能解决一点问题: 在窗口或控件上设置字体属性就可以了(红色标注部分),如下: <UserControl x:Class="..."             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"             xmlns:x="http

ListView嵌套GridView显示不全解决方法

转载注明出处:http://blog.csdn.net/allen315410/article/details/40152987 最近在做项目中,有个模块需要在ListView中嵌套一个GridView制作"九宫格"的效果,结果GridView上的子元素仅仅显示了一行,没有显示完整的说,如下图: 其实这个ListView上一共需要显示的是6张图片,也就是说还有3张图片需要在下一行显示的,结果GridView没有显示完全,这个问题很奇怪,但是已经找到解决的方案,就是重写一个GridVie

always (*) 后代码全部显示注释字体的颜色之解决方法

ISE或UE等其他编辑器中, always (*) 后代码全部被注释. 或者说显示注释的字体颜色,看起来不方便. 解决方法: 删除 verilog 2001.uew中的 Block Comment On Alt = (* Block Comment Off Alt = *) 后 就可以正常使用always(*)了,要不然在us里这块代码显示被注释了 还有一种方法,就是使用always *  不要括号,也可以正常使用. 版权声明:本文为博主原创文章,未经博主允许不得转载.

jQuery UI的下拉框显示不全解决方法

解决前,显示不全,select下拉框某些选项无法看到: <script type="text/javascript"> $("#cond_EPARCHY_CODE").selectmenu(); </script> 解决后: <style> .overflow { height: 200px; } </style> <script type="text/javascript"> $(&q