您的位置 首页 css教程

css如何设置超出部分不显示?

平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱。这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉,又不撑破DIV布局。

我们可以使用CSS overflow样式设置超出部分不显示:

对应样式overflow:hidden

Div{overflow:hidden}

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

示例:

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

<div class="div1">这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 
这是一些文本。 这是一些文本。 这是一些文本。</div> 

</body>
</html>

效果图:

1 (2).jpg

属性值:

  • visible 默认值。内容不会被修剪,会呈现在元素框之外。

  • hidden 内容会被修剪,并且其余内容是不可见的。

  • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

  • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

  • inherit 规定应该从父元素继承 overflow 属性的值。

以上就是css如何设置超出部分不显示?的详细内容,更多请关注火云技术网其它相关文章!

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

网站地图