HTML/CSS 05-文本溢出相关属性

css溢出属性overflow,css空余空间,css省略号表示

目录
一、溢出属性（容器的）

二、空余空间

三、省略号显示

一、溢出属性(容器)

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

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

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

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

auto:如果内容被修剪,则浏览器会显示滚动条，以便查看其他的内容(内容超出就显示滚动条，否则不显示滚动条);

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

overflow-x  单独设置x轴的overflow属性

overflow-y 单独设置y轴的overflow属性

overflow还有很多其他的用法，后面我会专门开一篇文章写overflow。

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

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

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

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

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

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

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

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

3、text-overflow:clip/ellipsis

clip:不显示省略号(...) ,而是简单的裁切;

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

text- overflow属性仅是...当单行文本溢出时是否显示省略标记，并不具备其它的样式属性定义

要实现单行文本溢出时产生省略号的效果还需定义:

1、容器宽度: width: value;  （宽度必须生效）

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

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

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

扩展:实现多行文本溢出时产生省略号

display: -webkit-box; 

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

1、-webkit-line-clamp用来限制在一个块元素 显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。

常见结合属性:

2、display: -webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。

3、-webkit-box-orient 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。

适用范围:

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端;但文字未超出行的情况下也会出现省略号，可结合js优化