请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 369|回复: 9

[css] div+css最后一排文字显示不全

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-2-5 23:23:24 | 显示全部楼层 |阅读模式
div css布局DIV盒子里的最后一排文字字体显示一半显示不全如何进行解决?或者最后一排文字内容超出DIV边框,最后一排内容显示与隐藏如何控制和取舍的CSS布局
这里DIVCSS5为大家介绍最后一排文字显示一半与最后一排文字显示不完解决方法。
一、最后一排文字超出DIV边框   -   TOP
在布局中常常出现最后1排或多排文字超出DIV边框显示。
1、HTML完整源代码如下:
  • <!DOCTYPE html>
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>DIVCSS5实例之显示不全或超出</title>
  • <style>
  • .divcss5{ border:1px solid #000; width:200px; height:50px;line-height:20px}
  • </style>
  • </head>
  • <body>
  • <div class="divcss5">
  • 最后一排文字显示不完<br />
  • 最后一排文字显示一半测试<br />
  • DIVCSS实例测试
  • </div>
  • </body>
  • </html>

2、css字体文字超出DIV边框截图

文字超出DIV边框显示

文字超出DIV边框显示

最后一排文字超出DIV边框显示
3、分析原因
以上文字字体内容显示超出DIV典型是高度设置错误,此盒子高度为50px,css行高为20px,那么三排文字就会占用60px的高度,而高度却设置为50px,自然高度少了10px,在高版本浏览器中就会出现这种内容溢出现象。
4、解决方法
解决最后一排显示超出问题有四种解决方法:
第一种,将高度计算好,以上要排版三排内容,而line-height设置为20px,那么高度就设置为3乘以20=60px(最少等于或大于60px)。
第二种,去掉高度height样式,如果不确定DIV盒子里装多少内容,最简单方法也是通用方法就是取消对DIV高度设置,这样DIV就会随内容多少增高
第三种,修改line-height高度,如果你CSS布局中高度固定,并且显示内容也固定并想显示完整,就只有修改css line-height的值,这个案例50除以3=16.6,那么line-height设置整数16px即可解决内容溢出固定高度。
第四种,减少内容,这里显示的是三排内容,你只需要去掉一排,让内容只显示两排即可解决。
二、最后一排文字字体显示一半   -   TOP
很多时候布局中除了以上问题,超出DIV的内容并不溢出而是隐藏不显示,如何解决?
1、HTML+CSS实例代码
  • <!DOCTYPE html>
  • <html>
  • <head>
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • <title>DIVCSS5实例之显示不全或超出</title>
  • <style>
  • .divcss5{border:1px solid #000;width:200px;overflow:hidden;height:50px;line-height:20px}
  • </style>
  • </head>
  • <body>
  • <div class="divcss5">
  • 最后一排文字显示不完<br />
  • 最后一排文字显示一半测试<br />
  • DIVCSS实例测试
  • </div>
  • </body>
  • </html>

2、案例效果截图

文字显示不全截图

文字显示不全截图

DIV CSS布局中最后一排文字显示不全截图
3、css布局文字显示不全原因分析
以上案例与第一个溢出DIV盒子代码相同,只不过多了overflow:hidden样式。此“overflow:hidden”样式具有隐藏DIV超出的内容,因此最后一排文字出现显示不全或只显示一半。
4、解决方法
解决方法可以参考上一个css兼容问题“最后一排文字超出DIV边框”得到很好解决。
4-1:减少文字行数(这里减少一行即可)
4-2:设置高度,高度计算好
4-3:不设置高度
4-4:高度固定情况下,计算修改line-height的值
具体方法看问题案例一详细解决方法。
三、CSS教程总结   -   TOP
以上是常见布局中文字内容超出DIV或显示一半显示不全,常常是由于高度和line-height计算配合有问题。实际布局中设置高度同时多想一想设置的高度限制对应DIV里内容多少是否能显示完整是否溢出。

想要了解更多更全面的web前段知识,css样式,html教程,数据库教程,word教程,excel教程等等,就到excel学习网www.excelxue.com

回复

使用道具 举报

1

主题

1181

帖子

69

积分

注册会员

Rank: 2

积分
69
发表于 2016-3-12 15:07:26 | 显示全部楼层
写的不错,支持一下哟
回复 支持 反对

使用道具 举报

0

主题

1013

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2016-3-29 14:54:53 | 显示全部楼层
不错,学习了
回复 支持 反对

使用道具 举报

0

主题

775

帖子

783

积分

高级会员

Rank: 4

积分
783
发表于 2016-4-5 14:58:34 | 显示全部楼层
一下子解决了我工作当中的难题,谢谢楼主,非常感谢!
回复 支持 反对

使用道具 举报

3

主题

1133

帖子

53

积分

注册会员

Rank: 2

积分
53
发表于 2016-12-4 09:36:41 | 显示全部楼层
不错的平台,以后需要经常光顾!
回复 支持 反对

使用道具 举报

0

主题

730

帖子

67

积分

注册会员

Rank: 2

积分
67
发表于 2017-7-2 17:12:49 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

2

主题

1036

帖子

87

积分

注册会员

Rank: 2

积分
87
发表于 2018-5-22 17:44:50 | 显示全部楼层
这个资料非常不错,好东东!
回复 支持 反对

使用道具 举报

0

主题

1013

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2018-10-9 22:55:01 | 显示全部楼层
楼主是好人哪,感谢分享,太棒了!
回复 支持 反对

使用道具 举报

0

主题

1007

帖子

6

积分

注册会员

Rank: 2

积分
6
发表于 2018-12-31 20:24:52 | 显示全部楼层
楼主是好人哪,感谢分享,太棒了!
回复 支持 反对

使用道具 举报

3

主题

1133

帖子

53

积分

注册会员

Rank: 2

积分
53
发表于 2019-1-3 22:24:41 | 显示全部楼层
顶顶
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2019-3-19 06:12 , Processed in 0.271359 second(s), 34 queries .

快速回复 返回顶部 返回列表