您当前的位置:首页 > 文章 > CSS 控制溢出行为

CSS 控制溢出行为

作者:资深前端之路 时间:2024-04-30 阅读数:304 人阅读
一、主要属性
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

本站大部分文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了您的权益请来信告知我们删除。邮箱:1451803763@qq.com