溢出超出DIV边框的内容自动隐藏方法

分类 : 语言编程

CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

在div布局中内容溢出了容器,超出了容器所限定的宽度应该怎么办呢?很是疑惑,于是搜集整理一番,发现可以让内容超出容器时超出部分显示省略号,这种做法不仅解决了问题,而且很美观,好了,不多说了,有兴趣的朋友可以参考下


平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。

这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。

特别是在IE6,如果内容超出对象高度和宽度承载,将会被撑破增高,这个时候我们可以利用以下解决方法。

一、解决CSS样式   -   TOP

这时我们可以使用CSS overflow样式解决:
对应样式overflow:hidden

Div{overflow:hidden}

这样设置后,假如DIV对象设置一定宽度高度,此时加入overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片。

相关阅读:css实现溢出超出文字内容显示省略号

二、隐藏超出内容案例   -   TOP

1、隐藏超出对象宽度高度文字内容
假如我们在一个布局中为了美观对齐,有时我们需要设置了对象高宽后就固定了,这个时候需要实现无论多少内容文字都不要超出设置宽度高度布局,这个时候我们需要overflow:hidden帮忙。

CSS代码:

  1. <style>

  2. .divcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}

  3. /* 设置对象高度宽度,同时设置overflow:hidden */

  4. </style>

Html代码:

  1. <div class="divcss5">欢迎来到CSS5NET网,

  2. 在这里你可以学习CSS同时也可以下载需要的资源,

  3. 同时可以找到自己常见问题答案</div>

隐藏多余文字内容方法案例截图

解决撑破内容方法
CSS隐藏溢出内容方法示范截图

这样设置了overflow:hidden无论多少内容都会隐藏对象设置宽度和高度以外装不下的内容。

2、隐藏超出对象宽度的图片部分案例
这里设置一个一定CSS宽度和CSS高度的对象盒子,放一个大的图片,然后使用overflow:hidden隐藏其超出部分。

Css代码

  1. <style>

  2. .divcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}

  3. /* 设置对象高度宽度,同时设置overflow:hidden */

  4. </style>

Html代码

  1. <div class="divcss5">

  2. <img src="http://www.css5.net/uploads/allimg/130219/1_130219231214_1.jpg" />

  3. </div>

案例:

[html] 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> 
<head profile="http://www.w3.org/2000/08/w3c-synd/#"> 
<meta http-equiv="content-language" content="zh-cn" /> 
<meta http-equiv="content-type" content="text/html;charset=gb2312" /> 
<title>div中溢出文字用点代替的代码</title> 
<style type="text/css"> 
/*<![CDATA[*/
li { 
width:200px; 
white-space:nowrap; 
text-overflow:ellipsis; 
-o-text-overflow:ellipsis; 
overflow: hidden; 
} 
/*]]>*/
</style> 
</head> 
<body> 
<ul> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li> 
</body> 
</html> 
[/html] 




相关文章

HTML 标签:HTML <dl> 标签



分类: 语言编程    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程

分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

SQL,NoSQL和NewSQL
html5中datalist标签怎么用
C++中的memcpy的用法
使用 Java 有哪些系统要求?
DBC+MySQL入门实战(实现CURD的例子)
方正综艺繁体下载字体后如何安装,如何下载字体并安装
方正综艺繁体免费字体下载,方正综艺繁体字体免费下载,方正综艺繁体字体下
方正中倩简体下载大全,什么方正中倩简体字体下载
方正中倩繁体(FZZQFW)字体下载,方正中倩繁体字体下载
方正中等线繁体免费字体下载,方正中等线繁体字体免费下载

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
vscode----vue中HTML代码tab键自动补全
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
undefined是什么意思啊
前端该怎么学?推荐一个学习路线!
.Net轻松处理亿级数据--ClickHouse数据操作
DIV CSS字体(font-family)实现字体样式设置
Mysql里表示布尔型的类型是什么
sql中的modify语句,修改列属性
html5中datalist标签怎么用

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16