CSS-盒子模型元素溢出

作用:控制溢出的元素的内容的显示方式

属性:overflow

属性值

属性值 效果
hidden 溢出隐藏
scroll 溢出滚动(无论是否溢出,都显示滚动条位置)
auto 溢出滚动(溢出才显示滚动条位置)
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

     div{
       width:100px;
       height: 100px;
       background-color: red;
     }
   
     
    </style>
</head>
<body>
<div>hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world</div>

</body>
</html>

正常情况下,网页是这个样子的,当文本超出了行高之后

使用了属性overflow之后,溢出的部分都被隐藏住了

相关推荐
૮・ﻌ・4 分钟前
Vue2(一):创建实例、插值表达式、Vue响应式特性、Vue指令、指令修饰符、计算属性
前端·javascript·vue.js
半生过往1 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听1 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle1 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎1 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特1 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle1 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落1 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金611271 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户47949283569151 小时前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全