CSS-溢出的处理

关于溢出一般的处理情况

p {
    width: 550px;
    text-overflow: ellipsis;
    overflow: hidden;
}

但是可能遇到的问题是，由于没有限制height，p和div中的文本遇到边界会自动换行，导致并没有所谓的溢出。（亦可在上述基础上直接设定限定的height值，则超出该部分的文本会被隐藏。但最好不要使用该方法）

超过一行显示省略号

使用的到的属性：width、text-overflow、white-space、overflow

p {
    width: 550px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

说明：通过text-overflow和white-space将文本控制在一行内，且宽度有限（width值），超出的部分隐藏（overflow）

text-overflow

该属性用于设置文本溢出的部分，包括两个值：clip（默认值）和ellipsis 。

• clip：英文意思即为裁剪，表示将溢出的部分直接裁剪掉，这会产生一些问题。比如，因为被截的第一个文字只显示一部分，不能完全显示，看着很别扭
• ellipsis：英文意思即为省略号，表示将溢出的文字以省略号代替显示。这时表示文字加上代替的“…”的总长度为width值

white-space

该属性用于设置如何处理元素中的空白，包括的值有normal(默认)、pre、pre-wrap、pre-line、nowrap、inherit。

• normal：默认处理方式
  
• pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行
  
• pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行
  
• pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行
  
• nowrap：强制在同一行内显示所有文本，直到文本结束或者遇到 br 对象
  
• inherit：从父元素继承 white-space 属性的值

设置该属性值主要是为了处理文本中包含空白符与换行符的情况。通过nowrap值阻止文本的换行

超过多行显示省略号

p {
    width: 550px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

仅针对基于webkit内核的浏览器（Chrome、Safari、搜狗高速浏览器、QQ浏览器、360极速浏览器等）

(关于弹性盒模型明天再深入了解….)