{site_name}

{site_name}

🌜 搜索

CSS3 溢出指的是当元素的内容超出它的容器时如何处理的规则

前端 𝄐 0
css溢出处理,html溢出,css如何对溢出文字进行隐藏,css外边距溢出,css防止溢出,css元素溢出
CSS3 溢出指的是当元素的内容超出它的容器时如何处理的规则。CSS3 提供了多种控制溢出的属性,包括 overflow, text-overflow 和 white-space。

1. overflow 属性:用于控制元素内容溢出容器后的显示方式,有以下几个值可选:visible(默认值)、hidden、scroll和auto。

css
/*隐藏溢出部分*/
.box {
overflow: hidden;
}

/*自动添加滚动条来查看溢出部分*/
.box {
overflow: auto;
}


2. text-overflow 属性:主要用于控制文本内容溢出容器时的显示效果,只对单行文本有效。有以下几个值可选:clip(默认值)、ellipsis和string。

css
/*使用省略号表示被截断的文本*/
.text {
white-space: nowrap; /*必须加上*/
overflow: hidden;
text-overflow: ellipsis;
}


3. white-space 属性:用于控制元素内空白字符的处理方式。有以下几个值可选:normal(默认值)、pre、nowrap、pre-wrap和pre-line。

css
/*不折行*/
.box {
white-space: nowrap;
}

/*保留空白符*/
.box {
white-space: pre-wrap;
}


以上是 CSS3 溢出的一些基本属性和用法,在实际应用中可以根据具体需求灵活运用。