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

kevin-ying · 发表于 2014-8-2 12:29:29

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

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

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

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

一、解决CSS样式 - TOP

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

Div{overflow:hidden}

复制代码

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

二、隐藏超出内容案例

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

CSS代码：

<style>
.divcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>

复制代码

Html代码：

<div class="divcss5">欢迎来到DIVCSS5网，
在这里你可以学习CSS同时也可以下载需要的资源，
同时可以找到自己常见问题答案</div>

复制代码

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

CSS隐藏溢出内容方法示范截图

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

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

Css代码

<style>
.divcss5{ width:300px; height:50px; line-height:25px; overflow:hidden}
/* 设置对象高度宽度，同时设置overflow:hidden */
</style>

复制代码

Html代码

<div class="divcss5">
<img src="http://www.divcss5.com/uploads/allimg/130219/1_130219231214_1.jpg" />
</div>

复制代码

截图
本身图片大小为：

案例原始大图片

DIV CSS隐藏后截图

设置宽度和高度，虽然图片大

总结要想让内容不超出对象设置宽度高度限定，那就使用overflow:hidden隐藏超出多余部分即可。

kevin-ying · 发表于 2014-8-4 10:05:20

css实现图片横向排列，溢出隐藏\滚动条横向拖动关键样式：

white-space:nowrap;/*内容横向排列不换行*/
overflow-x:auto;　　overflow-y:hidden;/*隐藏溢出部分。横向滚动条自动出现，纵向滚动条隐藏*/

复制代码

预览代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css实现图片横向排列，溢出隐藏横向滚动</title>
<style. type="text/css">
<!--
.inimg {width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}
.inimg img {width:670px;height:375px;}
-->
</style>
</head>
<body>
<div class="inimg">
<img src="" _fcksavedurl="" width="670" height="375" alt="img" />
<img src="" _fcksavedurl="" width="670" height="375" alt="img" />
<img src="" _fcksavedurl="" width="670" height="375" alt="img" />
<img src="" _fcksavedurl="" width="670" height="375" alt="img" />
</div>
</body>
</html>

复制代码

kevin-ying · 发表于 2015-8-13 21:53:59

让DIV,LI等元素超出部分文字用省略号…显示。

兼容IE/Firefox/Chrome

代码：

display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

复制代码

vingoo · 发表于 2018-8-29 12:54:24

[CSS] 纯文本查看 复制代码

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

vingoo · 发表于 2018-8-29 12:55:09

[CSS] 纯文本查看 复制代码

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

//上面是一行内容的时候，当有两行的内容时候

[CSS] 纯文本查看 复制代码

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行

		自动登录	找回密码
密码			免费注册

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

本帖子中包含更多资源

相关帖子