CSS中的overflow,

这篇具有很好参考价值的文章主要介绍了CSS中的overflow,。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.总结(overflow只用于指定高度的块级元素上)

1.overflow:visible;文本内容不会被修剪,会溢出到元素框外。

2.over:hidden;文本内容会被裁剪,并且元素框外的内容是不可见的。

3.over:scroll;内容会被裁剪,但浏览器会显示滚动条以便查看其他内容。

4.over:auto;和over:scroll;类似,但是over:scroll;默认形成滚动条,而over:auto;只在需要时形成滚动条,当文本不出现溢出时便不会形成滚动条

2.代码实践

1.overflow:visible
我们先定义一段代码,这里文本内容会超出元素框:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            div{
                width: 200px;
                height: 50px;
                background-color:#eee ;
                border: 1px dotted black;
                overflow: visible;
            }
    </style>
</head>
<body>
<div>
    <p>这里的文本内容会溢出元素框</p>    
    <p>这里的文本内容会溢出元素框</p>
    <p>这里的文本内容会溢出元素框</p>
</div>
</body>
</html>

运行结果:
CSS中的overflow,
这里是overflow的基本默认属性,文本不会被修剪,直接超出元素框。
2.over:hidden;
这个属性内容会被修剪,但是溢出的内容是无法看到的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            div{
                width: 200px;
                height: 50px;
                background-color:#eee ;
                border: 1px dotted black;
                /*overflow: visible;*/
                overflow: hidden;
            }
    </style>
</head>
<body>
<div>
    <p>这里的文本内容会溢出元素框</p>
    <p>这里的文本内容会溢出元素框</p>
    <p>这里的文本内容会溢出元素框</p>
</div>
</body>
</html>

运行结果:
CSS中的overflow,
这里比较上面的属性,同样的元素框,但是溢出部分却已经被裁剪且无法显示。
3.over:scroll;
相比于1,2的属性,over:scroll;会裁剪内容,浏览器会形成滚动条便于查看超出元素框的文本内容。
代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
            div{
                width: 200px;
                height: 50px;
                background-color:#eee ;
                border: 1px dotted black;
                /*overflow: visible;*/
                /*overflow: hidden;*/
                overflow: scroll;
            }
    </style>
</head>
<body>
<div>
    <p>这里的文本内容会溢出元素框</p>
    <p>这里的文本内容会溢出元素框</p>
    <p>这里的文本内容会溢出元素框</p>
</div>
</body>
</html>

运行结果:
CSS中的overflow,文章来源地址https://www.toymoban.com/news/detail-446621.html

到了这里,关于CSS中的overflow,的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

    在开发中 , 经常需要使用到 元素的显示 与 隐藏 , 默认状态下 , 按钮下面没有任何内容 ; 将鼠标移动到 红色按钮 后 , 显示一个对话框布局 ; 控制 元素的 显示 与 隐藏 的样式有如下三种 : display visibility overflow 为标签元素设置 可以 隐藏该元素 ; 如果想要 显示该对象 , 为该元

    2023年04月14日
    浏览(53)
  • CSS设置高度

    要设置 `@article.content` 的恰当高度,您可以使用 CSS 来控制元素的外观。有几种方法可以设置元素的高度,具体取决于你的需求和布局。 以下是几种常见的方法: 1. 固定高度:你可以直接为 `@article.content` 设置一个固定的高度值,以像素(px)为单位。例如: 在上述示例中,

    2024年02月14日
    浏览(36)
  • 将图片的大小(分辨率)调整为指定的宽度和高度

    这段代码将图像文件\\\"original.jpg\\\"的大小调整为宽度300像素,高度200像素,并将调整后的图像保存为\\\"resized.jpg\\\"。您可以根据需要修改输入和输出的文件路径和名称。 1. 方法一 2. 方法二

    2024年02月08日
    浏览(51)
  • 使用CSS计算高度铺满屏幕

    今天写项目时出现高度设置百分百却不占满屏幕,第一反应看自己设置的是块级元素还是行级元素。看了几篇博客,发现并不能解决问题。脱离文档流的做法都没考虑,前期模板搭建脱离文档流,后面开发会出现很多问题。 以上图片是我要解决的问题 目前使用的是vue3+setup语

    2024年01月21日
    浏览(31)
  • [HTML]Web前端开发技术6(HTML5、CSS3、JavaScript )DIV与SPAN,盒模型,Overflow——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS盒模型简介 CSS盒模型 CSS盒模型结构 盒模型的属性 边框border 边框宽度border-width 边框样式border-sty

    2024年02月04日
    浏览(57)
  • 记录--不定高度展开收起动画 css/js 实现

    最近在做需求的时候,遇见了元素高度展开收起的动画需求,一开始是想到了使用 transition: all .3s; 来做动画效果,在固定高度的情况下, transition 动画很好使,满足了需求,但是如果要考虑之后可能还会有更改的情况下,如果每次都是用固定高度来做动画,会显得很繁琐,也

    2024年02月11日
    浏览(55)
  • css自适应高度或宽度,超出内容显示滚动条

    有时候项目中使用了flex布局,高度或是宽度是自动填满剩余空间,不是具体的数值的时候,想要设置区域滚动条,可采用以下方法设置:

    2024年02月13日
    浏览(42)
  • css、js(vue)进行textarea自适应高度(超详细说明)

    黑色部分——页面布局为上左右下布局 红色部分——在右边有一个文本域,自适应高度,最小高度128px,最大高度不能超过右边屏幕的一半,里面有一个距离右下16px的确认按钮 效果如下图 问题1: 会导致有多余留白 问题2:超出限制的高度也不会出现滚动条(由问题1延申而

    2024年02月13日
    浏览(40)
  • angualr:CSS一个div内两个子元素的高度自适应

    问题:         如题 参考:         CSS一个div内两个子元素的高度自适应-腾讯云开发者社区-腾讯云

    2024年02月09日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包