您现在的位置是: 首页 » 网页代码 » css如何设置超出部分不显示?
网页代码

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

网站优化小编十一月 5, 2019 5人已围观

平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破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>

效果图:

网站运营中栏目排名优化技巧

属性值:

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

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

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

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

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

相关文章

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:199天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:2509 条
  • 文章评论:5 条
  • 微信公众号:扫描二维码,关注我们