CSS 控制溢出行为

CSS控制溢出行为是为了解决当盒子设置了一个高度或者宽度，文本内容可能会溢出盒子问题。

一、主要属性

1.overflow

定义：超出盒子模型，内容溢出盒子时显示的方式。

|---------|-----------------------|
| visible | 默认值，内容不被隐藏，会显示只盒子模型之外 |
| hidden | 超出盒子的内容被隐藏 |
| scroll | 固定滚动条显示 |
| auto | 如果内容超出，则显示滚动条 |
| inherit | 继承父类的overflow属性 |

2.text-overflow

定义：超出盒子模型，内容溢出盒子时显示的方式。

|----------|------------------|
| clip | 默认值，直接隐藏 |
| ellipsis | 显示省略符号来代表被隐藏的文本。 |
| string | 指定字符串来代表被隐藏的文本。 |

3.display:-webkit-box

定义：弹性盒子排列方式。

4.-webkit-box-orient

定义：弹性盒子子元素排列方式

|------------|-----------|
| horizontal | 默认值，横向排序 |
| vertical | 纵向排序 |
| inherit | 继承父元素排序方式 |

5.-webkit-line-clamp

定义：弹性盒子显示多少行的内容

6.white-space

定义：段落中的文本不进行换行

|----------|----------------------|
| normal | 默认值，空白忽略 |
| pre | 空白会保留 |
| inherit | 继承父元素 white-space 属性 |
| nowrap | 文本不会换行 |
| pre-wrap | 保留空白符序列,能换行 |
| pre-line | 合并空白符序列，保留换行符 |

二、实例代码

1、控制多行文本溢出

css 复制代码

.planDesc {  
    height: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //设置排列方式为 弹性盒子排列方式
    -webkit-box-orient: vertical; //子元素排列方式  horizontal 横向排序;   vertical 纵向排序; inherit 继承父元素排序方式
    -webkit-line-clamp: 6; //显示多少行的内容
}

2、控制当行文本溢出

css 复制代码

.selector {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

三、注意事项

控制多行文本溢出时，带有兼容性，只兼容-webkit的内核浏览器。而单行文本没有这个限制。

单行文本需要设置文本换行属性，禁止换行。

总上所述，控制文本溢出的行为主要是由overflow和text-overflow主要控制和显示。前者控制盒子的溢出显示效果，后者控制文本的溢出显示效果，此外还需要其它属性的协助和支持。