css基础-文本溢出

文本溢出

1、溢出属性（容器的）

overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;

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

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

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

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

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

2、Overflow内容溢出时的设置

属性：

overflow 水平及垂直方向内容溢出时的设置 
overflow-x 水平方向内容溢出时的设置 
overflow-y 垂直方向内容溢出时的设置

3、空余空间

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

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

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

pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签； （保留空格以及换行）

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

pre-wrap：保留空白符序列，但是正常的进行换行；(保留空格以及换行同时也能自动换行)

pre-line:合并空白符序列，但是保留换行符；（只保留换行）

inherit：规定应该从父元素继承White-space属性的值；(ie浏览器不支持此属性值)

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

取值：

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

ellipsis：当对象内文本溢出时，显示省略标记；

说明：

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

1、容器宽度：width：value；

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

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

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