从零开始前端学习[17]:overflow超出是否隐藏的使用方式

最新推荐文章于 2024-10-02 09:25:25 发布
最新推荐文章于 2024-10-02 09:25:25 发布
阅读量2k 收藏 2
点赞数 3
分类专栏： # 1.从零开始挑战前端 文章标签： overflow overflow-x overflow-y 文本超出隐藏
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_29924041/article/details/78068888
版权

overflow超出是否隐藏的使用方式

  • overflow属性及属性值的使用
  • 单方向属性:overflow-x
  • 单方向属性:overflow-y

提示
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

overflow超出是否隐藏的使用方式

overflow故名思议：也就是超出隐藏的意思，即盒子的大小如果不能容纳指定内容的时候，这个时候是选择超出，还是显示；
其有3个属性值

overflow:hidden;//超出隐藏
overflow:scroll;//无论是否超出，x，y轴都是会出现滚动条的
overflow:auto;//当内容超出的时候，这个时候显示滚动条，如果内容没有超出，那么则不处理

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
        p{width: 300px;height: 100px;margin: 5px;border: 1px solid green}
        .main{width: 1200px;margin: 10px auto;box-shadow: 0px 0px 10px 0px deeppink;
        }
        .main .hidden{overflow: hidden}
        .main .scroll{overflow: scroll}
        .main .auto_1{overflow: auto}
        .main .auto_2{overflow: auto}
        .main .text_overflow{overflow: hidden;white-space: nowrap;text;text-overflow: ellipsis}
  </style>
</head>
<body>
  <div class="main">
      <p class="hidden">
        呼喊是爆发的沉默
        沉默是无声的召唤
        不论激越
        还是宁静
        我祈求
        只要不是平淡
        如果远方呼喊我
        我就走向远方
        如果大山召唤我
        我就走向大山
        双脚磨破
        干脆再让夕阳涂抹小路
        双手划烂
        索性就让荆棘变成杜鹃
        没有比脚更长的路
        没有比人更高的山 </p>
      <p class="scroll">
        呼喊是爆发的沉默
        沉默是无声的召唤
        不论激越
        还是宁静
        我祈求
        只要不是平淡
        如果远方呼喊我
        我就走向远方
        如果大山召唤我
        我就走向大山
        双脚磨破
        干脆再让夕阳涂抹小路
        双手划烂
        索性就让荆棘变成杜鹃
        没有比脚更长的路
        没有比人更高的山</p>
      <p class="auto_1"> 呼喊是爆发的沉默
        沉默是无声的召唤
        不论激越
        还是宁静
        我祈求
        只要不是平淡
        如果远方呼喊我
        我就走向远方
        如果大山召唤我
        我就走向大山
        双脚磨破
        干脆再让夕阳涂抹小路
        双手划烂
        索性就让荆棘变成杜鹃
        没有比脚更长的路
        没有比人更高的山</p>
      <p class="auto_2">
        没有比脚更长的路
        没有比人更高的山</p>
      <p class="text_overflow">
        呼喊是爆发的沉默
        沉默是无声的召唤
        不论激越
        还是宁静
        我祈求
        只要不是平淡
        如果远方呼喊我
        我就走向远方
        如果大山召唤我
        我就走向大山
        双脚磨破
        干脆再让夕阳涂抹小路
        双手划烂
        索性就让荆棘变成杜鹃
        没有比脚更长的路
        没有比人更高的山</p>
  </div>
</body>
</html>

显示的效果如下所示:
这里写图片描述

hidden 第一个默认是超出隐藏的
scroll 第二个是加了滚动条的
auto 第三个因为是超出，所以也加了滚动条的
auto 第四个因为没有超出，所以没有滚动条
第五个就是之前说的，文本区域超出之后显示…的形式

单方向属性:overflow-x

overflow-x指的是在x轴方向上面的超出属性。注意，一定需要与 white-space: nowrap;不换行属性进行连用

overflow-x: hidden;  //x轴方向上隐藏
overflow-x: scroll;  //x轴方向上显示滚动条
overflow-x: auto;    //x方向上随机

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">
    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
    ul,ol{margin: 0; list-style: none; padding: 0;}
    a{ text-decoration: none; }
    *{ margin: 0; padding: 0; }
    p{width: 300px;height: 100px;margin: 5px;border: 1px solid green}
    .main{width: 1200px;margin: 10px auto;box-shadow: 0px 0px 10px 0px deeppink;white-space: nowrap;
    }
    .main .hidden{overflow-x: hidden}
    .main .scroll{overflow-x: scroll}
    .main .auto_1{overflow-x: auto}
    .main .auto_2{overflow-x: auto}
    .main .text_overflow{overflow-x: hidden;white-space: nowrap;text-overflow: ellipsis}
  </style>
</head>
<body>
<div class="main">
  <p class="hidden">
    呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山 </p>
  <p class="scroll">
    呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山</p>
  <p class="auto_1"> 呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山</p>
  <p class="auto_2">
    没有比脚更长的路
    没有比人更高的山</p>
  <p class="text_overflow">
    呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山</p>
</div>
</body>
</html>

显示效果如下所示:

这里写图片描述
可以看到其主要是在x轴上进行活动操作的

单方向属性:overflow-y

overflow-y指的是在x轴方向上面的超出属性。

overflow-y: hidden;  //y轴方向上隐藏
overflow-y: scroll;  //y轴方向上显示滚动条
overflow-y: auto;    //y方向上随机

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">
    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
    ul,ol{margin: 0; list-style: none; padding: 0;}
    a{ text-decoration: none; }
    *{ margin: 0; padding: 0; }
    p{width: 300px;height: 100px;margin: 5px;border: 1px solid green}
    .main{width: 1200px;margin: 10px auto;box-shadow: 0px 0px 10px 0px deeppink;
    }
    .main .hidden{overflow-y: hidden}
    .main .scroll{overflow-y: scroll}
    .main .auto_1{overflow-y: auto}
    .main .auto_2{overflow-y: auto}
  </style>
</head>
<body>
<div class="main">
  <p class="hidden">
    呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山 </p>
  <p class="scroll">
    呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山</p>
  <p class="auto_1"> 呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山</p>
  <p class="auto_2">
    没有比脚更长的路
    没有比人更高的山</p>
  <p class="text_overflow">
    呼喊是爆发的沉默
    沉默是无声的召唤
    不论激越
    还是宁静
    我祈求
    只要不是平淡
    如果远方呼喊我
    我就走向远方
    如果大山召唤我
    我就走向大山
    双脚磨破
    干脆再让夕阳涂抹小路
    双手划烂
    索性就让荆棘变成杜鹃
    没有比脚更长的路
    没有比人更高的山</p>
</div>
</body>
</html>

显示效果如下所示:

这里写图片描述

从上述可以看到，其主要的溢出方向是y轴的方向，并且如果没有设置overflow系列属性的时候，这个时候的内容显示就超出了盒子的空间。

欢迎持续访问博客

^_^ 小小码nong
关注
专栏目录
溢出（height）隐藏 和边框，边框阴影
zxk_and_you的博客
10-29 515
4.溢出 溢出作用(height)： overflow/overflow-x/overflow-y:hidden; 溢出隐藏 overflow:visible; 溢出不隐藏(默认） overflow:scroll; 必须出滚动条，xy轴 overflow:auto; 自动出滚动条 自动增高作用(清除浮动)： overflow:hidden; 5.边框倒角 border-radius 1个值...
从零开始学习HTML
Zzl_desu的博客
08-02 919
HTML+CSS学习记录
overflow:hidden对于溢出到padding的内容不隐藏
m0_37828249的博客
06-24 1万+
盒子模型的内容区域其实包括content+padding，即padding box，虽然正常情况下元素只在content内排布，但是当内容溢出到padding也是允许的，故overflow:hidden对此不做影响。 利用这个特性，我们可以使用div的padding为图片占位，防止图片加载出现抖动现象： &lt;div class="wrapper"&gt; &lt;img ...
CSS实现文本超出隐藏并显示省略号
最新发布
everfoot的博客
10-02 664
通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。
解决表格里面使用text-overflow后依旧不能隐藏超出的文本
colinmuxi
06-10 1762
在w3cschool中css3中有个文本相关的属性text-overflow，当把它设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉，当然，前提是设置好两个属性，那就是white-space:nowrap（强制文本在一行内显示）及overflow:hidden（溢出内容为隐藏），也就是要同时有 { text-overflow:ellipsis或c
CSS：overflow溢出显示隐藏
听海边涛声
08-10 2326
CSS：overflow溢出显示隐藏
overflow:hidden;与position搭配使用出现超出部分没有隐藏的问题
热门推荐
xhbd_933的博客
04-24 4万+
overflow 属性规定当内容溢出元素框时发生的事情。以下是overflow可能的值及其作用的简单描述值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflo...
【Vue3从零开始-实战】S16：详情页样式优化及tab栏内容联动功能实现
小王的技术库
07-21 537
本篇文章主要是把详情页中内容部分的联动功能实现了，而且把样式进行了优化，但是我们把逻辑部分都写在了setup函数中，还没有像以前首页、登录注册页面一样拆分出来，大家如果有兴趣可以自己拆分一下看看，下一篇会使用watchEffect方法进行拆分逻辑代码。...
Python数据分析与可视化入门：从零开始的数据探索之旅
[Python数据分析与可视化入门：从零开始的数据探索之旅](https://img-blog.csdnimg.cn/4eac4f0588334db2bfd8d056df8c263a.png) # 1. Python数据分析与可视化的基础 Python自诞生之初就被设计为一种易于阅读和编写...
【Python数据分析高效入门】：手把手带你从零开始构建数据处理流程
[【Python数据分析高效入门】：手把手带你从零开始构建数据处理流程](https://www.scrapingbee.com/blog/how-to-read-and-parse-json-data-with-python/header.png) # 1. Python数据分析基础 Python作为一门流行的...
从零开始一个微信小程序版知乎
weixin_45566319的博客
10-14 1773
以前工作没直接进行过小程序的开发，最近闲了下来就赶紧学习一下。因为从零开始，所以没有使用任何框架及UI库，记录一下本次开发中踩过的坑吧~ 展示效果(界面样式设计与交互来自iOS 4.8.0版本知乎App)： 动态效果请移步到GitHub查看。 一、开始前的准备 申请账号：根据小程序注册文档，填写信息和提交相应的资料，就可以拥有自己的小程序帐号。 开发工具：微信开发者工具 数据来源： Easy M...
overflow不一定能隐藏元素（position:absolute）
lollipop94的博客
09-20 3935
overflow不能隐藏元素的情况
不隐藏html超出部分,css如何设置超出部分不显示？
weixin_42150360的博客
06-04 6185
平时我们布局时候，有的文字内容多了会超过溢出我们限制的高度，有的图片会撑破DIV，让网页错位变乱。这样我们就需要解决如何使用CSS来超出设置CSS宽度和CSS高度的内容自动隐藏掉，又不撑破DIV布局。我们可以使用CSS overflow样式设置超出部分不显示：对应样式overflow:hiddenDiv{overflow:hidden}这样设置后，假如DIV对象设置一定宽度高度，此时加入overf...
overflow溢出显示隐藏
h131425q的博客
04-17 247
麦可思对本科生毕业五年后（2016届、2017届合并计算）的就业地跟踪统计发现，回县城工作的本科生中，有近六成（59%）是毕业五年内一直在县城工作，约四成（41%）是工作一段时间后再来到县城就业。据麦可思研究院统计数据，在县城工作的大学毕业生月收入，已从2018届的4640元上升到2022届的5377元。而就业满意度也从2018届的67%，上升到2022届的76%。/* scroll溢出部分显示滚动条 不溢出也显示滚动条 *//* auto 溢出部分才显示滚动条，不溢出不显示滚动条 */
css overflow-x: scroll 不展示/隐藏滚动条
Dream_Fever的博客
03-30 5777
除了可以设置隐藏滚动条，还有其他的伪类。
css overflow溢出显示隐藏
lxllxl211的博客
10-05 2283
将 overflow: hidden;改为overflow: scroll;将overflow: scroll;改为 overflow: scroll;有定位的盒子慎用overflow: hidden;/* 超出的时候显示滚动条，不超出不显示 */将默认改为 overflow: hidden;运行结果：溢出的部分显示滚动条 不溢出也显示。默认是：overflow: visible;运行结果：超出的时候显示滚动条，不超出不显示。溢出的部分显示滚动条 不溢出也显示*/运行结果：隐藏了溢出的部分。
html图片超出部分不隐藏,div必须设置高度overflow:hidden才能生效,超出部分隐藏
weixin_32307599的博客
06-03 1666
css talbe中td溢出隐藏 div溢出隐藏，overflow:hidden将会隐藏超出DIV宽度高度的内容包括图片td溢出隐藏1 table{2 width:100px;3 table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */4 }5 td{6 width:1...
overflow-y:auto(隐藏滚动条)
m0_61096379的博客
08-27 2237
滚动条隐藏
css 样式设置了overflow-y: scroll； 如何隐藏滚动条
weixin_56270315的博客
04-11 537
在设置overflow-y: scroll;容器外在套一个盒子 设置 overflow: hidden;然后设置要滚动的容器。
从零开始学JavaScript：编程入门指南
- 对于零基础学习者，应从计算机基础知识开始，理解编程概念、数据结构和算法，然后逐渐接触并学习JavaScript的基本语法，包括变量、数据类型、运算符、控制流等。 - 掌握HTML和CSS基础知识，理解前端开发环境和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值