005（文本溢出）

Day5 文本溢出相关属性

一、溢出属性（容器的）

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

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

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

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

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

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

二、空余空间(使用最多的是nowrap)

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

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

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

2.nowrap:文本不会换行，文本会在同一行上继续，直到遇到
标签为止；

3.pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签；（识别空格和回车）文字可以独占一行，也识别空格和回车

4.pre-wrap：保留空白符序列，但是正常的进行换行；识别空格和回车

5.pre-line:合并空白符序列，但是保留换行符；识别回车和一个空格

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

省略号属性（text-overflow：；）

1.clip：不显示省略号（…）,而是简单的裁切；

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

text-overflow（单独使用是无效的）：仅是…，当单行文本溢出时是否显示省略标记，并不具备其他样式属性定义

要实现单行文本溢出时产生省略号效果时还需要定义以下四条：

1.容器的宽度：width:value;

2.强制文本在一行内显示white-space：nowrap；

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

4.溢出文本显示省略号：text-overflow：ellipsis；