超出盒子隐藏(盒子超出显示范围)

CSS之overflow属性用法

CSS之overflow属性有四个值：visible

(默认),

hidden,

scroll,

和auto。同样有两个overflow的姐妹属性overflow-y

和overflow-x，它们很少被采用。让我们分别看一下这几个值，并讨论一写共同用法和技巧。

Auto

overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。

Hidden

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。这对应付使用动态的内容，而且可能会由于内容溢出而引起一些布局上的问题的确很有用。尽管如此，请记住用此方法隐藏的内容将彻底的看不到(除非去查看源代码)。

比如有的用户设置他们的浏览器的默认字体比你预期的要大些，你会将一些文字推到盒子的外面然后完全的隐藏之……

Visible

如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其它地方被设定的值。这里需要记住的重要的事情是，尽管盒子外面的内容是可见的，内容并不会影响页面的工作流。一般来说，你至少不用为里面的内容为文字的盒子设置固定的高度，这样就不会遇到这种情况了。

Scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

网页设计时选中文字时超出盒子的问题怎么解决

div style="overflow:hidden"/div

这条属性作用为：隐藏溢出

如何盒子内容超出盒子框是该如何处理。

外层标签加入强制换行。

给文字最近的外层标签加入强制换行的样式style="word-wrap: break-word;"或者是输入代码这条属性作用为：隐藏溢出。

position:absolute用法（隐藏溢出部分）

地址：

1、绝对定位元素溢出父元素，怎么隐藏问题？

通常，为了让DIV子元素超出部分隐藏，都是在父元素设置overflow:hidden，这样即可防止子元素撑开父元素，使子元素能够溢出隐藏！

但是，对于position:absolute定位的子元素，仅仅使用overflow:hidden没办法将其溢出部分隐藏，需要在父元素上也加上一个定位position:relative;才能将含有position:absolute属性的子元素进行溢出隐藏！

绝对定位元素相对的元素是它最近的一个祖先，该祖先满足：position的值必须是：relative、absolute、fixed，若没有这样的祖先则相对于body进行定位。偏移值由其top、bottom、left、right值确定。

而绝对定位的元素若超出其父元素的边界，要想将溢出的部分隐藏，则，想隐藏在哪个祖先里，该祖先必须同时设置position:relative/absolute/fixed和overflow:hidden的值。

2、绝对定位常见误区：

通常我们常听说：CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位，如果要想相对当前元素的父元素来定位，父元素一定要设置position：relative。

注意，前面一句是没有问题的，在没有父元素设置定位的话，默认就是以body来定位的，但是后面一句，要想相对父元素定位，父元素必须设置相对定位（relative），根据我的开发经验和查阅相关资料确认后发现，这是不对的。

正确的理解姿势是：

相对定位：相对于块级元素（或行内块）自身位置进行定位；

绝对定位：绝对定位的盒子是相对于 离它最近的一个已定位的盒子进行定位的（默认是body）；

PS：注意是最近的盒子，而不是最近的父元素

注意：css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位。

在网页DIV中，文字超出了盒子，怎么办？

两种方法，

1：强制换行。div style="width:930px;word-break:break-all;word-wrap:break-word;"/div

2：溢出隐藏。

div style="overflow:hidden; width:930px;"/div

自己试一下。就没有问题了。