CSS 控制溢出行为

发布于：2024-05-03 ⋅ 阅读:(140) ⋅ 点赞:(0)

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主要控制和显示。前者控制盒子的溢出显示效果，后者控制文本的溢出显示效果，此外还需要其它属性的协助和支持。