不隐藏html超出部分,css如何设置超出部分不显示?

编程入门 行业动态 更新时间:2024-10-12 03:23:30

不隐藏html超出部分,css<a href=https://www.elefans.com/category/jswz/34/1771438.html style=如何设置超出部分不显示?"/>

不隐藏html超出部分,css如何设置超出部分不显示?

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

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

对应样式overflow:hiddenDiv{overflow:hidden}

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

示例:

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

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

这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。

这是一些文本。 这是一些文本。 这是一些文本。

效果图:

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

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

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

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

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

更多推荐

不隐藏html超出部分,css如何设置超出部分不显示?

本文发布于:2024-02-06 14:24:32,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1749250.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:如何设置   html   css

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!