溢出

 

1、溢出属性（容器的）

overflow：visible/hidden（隐藏）/scroll/auto（自动）/inherit;

visible：默认值，内容不会被修剪，会呈现在元素框之外；

hidden：内容会被修剪，并且其余内容是不可见的；

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

auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容；

inherit：规定应该从父元素继承

 

overflow-x:hidden;取消横向滚动条

overflow-y:hidden;取消纵向滚动条

2、空余空间

white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit

 

该属性用来设置如何处理元素内的空白；

normal:默认值，空白会被浏览器忽略，

 

pre:空白会被浏览器保留，其行为方式类似HTML中的pre标签

nowrap：文本不会换行，文本会在同一行上继续显示，直到遇到<br/>标签为止

pre-wrap：保留空白符序列，但是正常的进行换行；

pre-line：合并空白符序列，但是保留换行符；

inherit：规定应该从父元素继承white-space属性的值；（ie浏览器都不支持此属性）

 

3、文本溢出：text-overflow:clip/ellipsis

取值：

clip:不显示省略号（...），而是简单的裁切；

ellipsis:当对象内文本溢出时，显示省略标记（...）；

说明：text-overflow属性仅是...，当文本溢出时是否显示省略标记，并不具备其他的样式属性定义，要实现溢出时产生省略号的效果还需定义：

1、容器宽度：value;

2、强制文本在一行内显示：white-space:nowrap;

3、溢出内容为隐藏：overflow:hidden;

4、溢出文本显示省略号：text-overflow:ellipsis;

 

&copy:©版权所有