html/css-css-溢出

本文深入探讨了CSS中处理元素溢出的各种方法,包括使用overflow属性的可见性控制、滚动条显示,以及text-overflow属性的文本截断效果。通过实例说明了如何避免内容超出容器边界,保持网页布局的整洁。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

溢出

含义

情况1:内容面积大于div

是一个容器元素
内容是一个文本内容
情况2:图片超出元素范围
情况3:指定元素的子级超出
溢出:子元素(文本、图片、其他元素)超出指定容器范围
这样不好,不希望它出现
overflow:设置溢出时,是否剪辑、显示滚动条或子级内容
visible: 默认值,不修剪,显示在父级外
hidden:修剪,其余不可见
scroll:内容被修剪,显示滚动条
auto:浏览器决定

案例

注册协议

overflow-x 和-y

支持情况并不好
-x -y
图片和子元素比容器大就会水平溢出,文本水平溢出-x情况:
1.很长的单词
强制拆词的css样式
2.white-space: nowrap;
whatcaniuse查元素的在浏览器的运用

text-overflow

clip 超出父级隐藏
ellipsis 超出父级部分显示…
string
前提 设置overflow属性
over-flow:hidden;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值