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、控制多行文本溢出
.planDesc {  
    height: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //设置排列方式为 弹性盒子排列方式
    -webkit-box-orient: vertical; //子元素排列方式  horizontal 横向排序;   vertical 纵向排序; inherit 继承父元素排序方式
    -webkit-line-clamp: 6; //显示多少行的内容
}

2、控制当行文本溢出
.selector {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

三、注意事项
        控制多行文本溢出时，带有兼容性，只兼容-webkit的内核浏览器。而单行文本没有这个限制。
        单行文本需要设置文本换行属性，禁止换行。

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

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/weixin_44565776/article/details/138306669