当parent div有一个column-count时，为什么overflow:hidden不能在chrome中工作？
当parent div有一个column-count时，设置overflow:hidden在Chrome中不起作用的原因是，当使用column-count属性创建多列布局时，Chrome会将列视为一个整体，并将其视为一个绘制区域。因此，设置overflow:hidden仅对整个列布局生效，而不是对列内的内容进行裁剪。
解决这个问题的方法是使用CSS属性break-inside:avoid或break-inside:auto来控制内容在列之间的换行。break-inside:avoid会尽量避免在列中断内容，而break-inside:auto则允许在列中断内容。通过设置这些属性，可以控制内容是否在列之间断开并显示出overflow:hidden的效果。
以下是一个示例代码：
.parent {
column-count: 2;
break-inside: avoid; /* 或者 break-inside: auto; */
overflow: hidden;
}这里的.parent是包含多列布局的父元素，设置了column-count为2来创建两列布局。同时，通过设置break-inside属性来控制内容在列之间的断行行为，可以根据实际需求选择避免断行或允许断行。最后，设置overflow为hidden来实现内容的裁剪。
对于腾讯云相关产品和产品介绍链接地址，这个问题与云计算品牌商无关，因此不需要提供相关链接。
相关·内容
2回答
涉及柱和表格的铬虫
、、、
我有这个柯德芬
<div id="cotizacioncontainer" >
<div id="cotizacion" >
<h1>fghgfh</h1>
<p class="resumen">fghfghfgh</p>
<form id="form" name="form1" method="post" action="SVF-emailer.php">
<div id="
浏览 2提问于2015-06-20得票数 2
CSS属性column-span: all似乎在容器上设置overflow: hidden或float: left|right后立即停止工作：
<div>
<h2>Spanning Header</h2>
<p>Lorem ipsum dolor …</p>
</div>
和
div {
column-count: 2;
column-gap: 2em;
float: left; /* or */
overflow: hidden;
}
h2 {
/* will no
浏览 0提问于2015-04-14得票数 2
回答已采纳
输出应为： ? 但在chrome上，我得到了这样的结果： ? 从div1中删除column-count属性可以解决这个问题。有趣的是，如果您检查并禁用该属性，然后重新启用它，则一切正常。这是Chrome中的bug吗？ #div1 {
column-count: 1;
}
#div2 {
overflow: hidden;
background: red;
}
#div3 {
transform: translate3d(50px, 50px, 0px);
} <div id="div1">
<div id="
浏览 42提问于2019-07-04得票数 1
1回答
我在Opera12中尝试将column-count与max-height结合使用时遇到了问题。问题是，当有一些固定的高度时，Opera会生成比column-count中指定的更多的列，而不是添加滚动。
例如，尝试使用以下html：
<div>
<ul>
<li>1</li> <li>2</li> <li>3</li>
<li>4</li> <li>5</li> <li>6</li>
浏览 1提问于2012-06-22得票数 4
我有一个iframe，我们只需要显示水平滚动条和防止垂直滚动条。
<div class="restricted">
<iframe runat="server" id="ifEmailBody" scrolling="auto" width="600" frameborder="1"> </iframe>
</div>
.restricted{overflow:hidden; overflow-y: hidden;}
.restricte
浏览 2提问于2014-04-10得票数 1
我试图将溢出隐藏在一个标签中，该标签是深度嵌套的flex容器的子容器。下面是两个简单的片段来说明这个问题：
单容器(works):
#parent-flexbox {
display: flex;
width: 200px;
}
label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id="parent-flexbox">
<label>long text that should be hidden because it
浏览 0提问于2018-03-30得票数 0
1回答
柔性与溢出:奇怪的行为
、、、
编辑:添加了flex方向:列，在初始代码.中漏掉了它
当子元素有overflow:auto而父元素有overflow:auto时，滚动条就会出现在子节点上。
但是当overflow:auto从parent中删除时，滚动条就会出现在grand-parent上。
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: "Roboto", sans-serif;
}
body {
margin: 0;
padding: 0;
}
.App {
display: f
浏览 2提问于2019-07-06得票数 1
我有这个mousedown函数，用来获取其父元素的索引值: div.combo_list，在Chrome和Firefox中，我得到的值都是从零开始的，比如0, 1, 2, 4...
奇怪的是IE8给了我：1, 3, 4...
有没有人知道或认识到这种行为？
<div class="combo_list " style="width: 143px; display: none; ">
<div style="width: 100%; overflow-x: hidden; overflow-y: hidden; ">&
浏览 0提问于2011-02-09得票数 0
我在IDE中更改了html代码，但是当我使用chrome工具检查相同的html时，我看到了完全不同的高度和宽度以及CSS，这在我的IDE中是看不到的。我没有写任何与HTML相关的CSS。它如何自生成？
下面是IDE的代码
<div class="page-content page-container" id="page-content">
<div class="padding">
<div cl
浏览 3提问于2020-11-28得票数 0
回答已采纳
我正在尝试应用text-overflow:省略号，它在特定的div中包含一个br标签。在chrome浏览器中工作正常，在IE和Edge浏览器中省略号(...)未显示。这个
标签将被动态添加。
<!DOCTYPE html>
<html>
<head>
<style>
div.b {
white-space: nowrap;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #000000;
}
浏览 4提问于2018-12-05得票数 0
2回答
CSS列显示错误
、、
我有一个div，column-count设置为3。里面有很多ul。我看到了右侧第4列的开头--当我指定了3列时，为什么会出现这种情况呢？
(Fiddle这里：)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div
{
height: 150px;
w
浏览 0提问于2012-12-14得票数 0
我有一个设置，其中我有一个block-display div，它以水平方式包含inline-block-display div。但是，如果屏幕很窄，我不希望每个div中的文本溢出，因为它会破坏右边的div。
但是，当我将overflow-x: hidden添加到inline-block中时，它会将填充添加到block div的底部。
注意，在顶部行中，灰色框如何延伸到较暗的框下，而在底部，它们是如何排列的？唯一的区别是第二行没有overflow-x属性集。
我已经在Chrome 39，Chrome 40和IE 11上测试过，这似乎是我想要的行为，但我不想要它。我也不想在div上设置一
浏览 2提问于2014-12-15得票数 4
回答已采纳
2回答
我有一个1000 is宽的div。在这个div里面是另一个4000 is宽的div。代码如下所示
<div id="parent_div">
<div id="child_div">
</div>
</div>
CSS
#parent_div{
position:relative;
height:500px;
width:1000px;
overflow:hidden;
}
#child_div{
position:relative;
height:500px;
浏览 4提问于2014-04-03得票数 0
回答已采纳
1回答
我在两列布局中使用了几个复选框列表，它们位于一个容器中，以允许滚动和限制列表大小。
现在，有时会显示复选框(没有标签)，即使它们位于滚动div的可见部分之外。如果我删除列选项，视觉毛刺就会消失。下面的代码片段说明了这个问题，我使用chrome 75.0.3770.100对其进行了封装。Firefox不会产生这个问题。IE和Edge看起来也不错。
这是一个已知的bug，有一个已知的解决方法，还是我做错了什么？
另外，为使用不会造成问题的浏览器的用户提供的屏幕截图：
div.parent{
column-count: 2;
}
div.list{
margin-top: 100p
浏览 0提问于2019-06-25得票数 0
当我在代码中改变父容器的伸缩方向时，为什么flex-grow停止工作？
在下面的示例中，我有两个div，一个是父flex-container div，另一个是具有绿色背景的单个flex项的子项，正如您所看到的，flex-grow工作得很好。
.flex-parent{
display:inline-flex;
flex-direction:row;
}
.flex-child{
overflow:hidden;
background:#99bb99;
flex-basis:0px;
flex-grow:1;
}
<div class=
浏览 0提问于2020-09-24得票数 0
我有一个多列布局的长文本。不幸的是，浏览器没有为文本生成滚动条。
如果我在文本中插入空格，则行为与预期的行为相同(滚动条显示)。
请看这个。在div下必须有水平滚动条。
div {
padding: 10px;
border: 0.1mm solid rgb(0, 0, 0);
column-gap: 10px;
width: 250px;
height: auto;
column-count: 2;
overflow-x: scroll;
background: #FFF;
text-align: justify;
}
浏览 5提问于2016-08-09得票数 4
回答已采纳
1回答
我有一个嵌套的子容器，当我尝试scrollIntoView时，它会破坏父容器。我不明白为什么会这样。请帮帮我。
请查看下面的代码或上的代码
function moveToTop() {
console.log('MOVE TO TOP::');
const child = document.getElementById('child');
child.scrollIntoView({
behavior: "smooth"
});
}
#parent {
background-color: blue;
paddi
浏览 1提问于2021-01-29得票数 3
回答已采纳
1回答
<div class="top"><p>hello</p></div>
<div class="bottom"><p>hello</p></div>
CSS
.bottom {
overflow: hidden;
}
我在学习CSS基础知识时偶然发现了这个问题：为什么 overflow: hidden 会导致中的垂直移位？在删除此属性或使用.bottom p {overflow: hidden;}时，所有操作都与预期的一样。我看到了的问题，但它们是关于inl
浏览 2提问于2020-10-01得票数 0
回答已采纳
1回答
我有以下简单的CSS多列布局：
ul {
column-count: 3;
}
li {
display: block;
position: relative;
}
.hover {
background-color: rgba(0, 0, 0, .5);
bottom: 0;
color: #fff;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 100%;
transition: top .25s ease-in-out;
}
li:hover .hove
浏览 0提问于2018-03-12得票数 0
回答已采纳
有一个家长和一个孩子
<div class="div-parent">
<div class="div-child">
Oportunum est, ut arbitror, explanare nunc causam.
</div>
</div>
使用文本溢出: div父级上的省略号
.div-parent {
border: solid 1px black;
width: 200px;
overflow: hidden;
white-space:
浏览 0提问于2018-11-30得票数 1
回答已采纳
为什么这个div可以水平滚动而不是垂直滚动？
.parent{
column-count:4;
background:gold;
margin:5px;
height:99px;
overflow-y:scroll;
}
<div class='parent'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce elementum rhoncus ex venenatis auctor. Integer vel hendrerit massa. Nam non ipsum sodales
浏览 0提问于2018-11-24得票数 0
回答已采纳
3回答
我正在用一个响应性的照片网格来处理一个WordPress主题。本质上，它是一个div容器，它在3列中显示其子div元素。我在每个较小的div上添加了一些css悬停效果。
照片网格在Firefox上显示得很好，但在Chrome中，只有第一列div按应有的方式显示。其他两列的图像没有显示，但它们在盘旋时闪烁。
下面是代码片段或 (您必须打开Chrome浏览器和另一个浏览器才能看到问题)。
/* Grid styling */
.grid-outer::before,
.grid-outer::after{
content:"
浏览 4提问于2017-10-06得票数 1
回答已采纳
现场演示：
有三个要素，如：
<div class="parent">
<div class="child"></div>
</div>
在第一个父程序中，有一个border-radius，子元素将被溢出。在第二个家长中，有一个是border-radius和overflow: hidden，所以会剪短子对象。他们俩都工作得很好。
但是在第三个元素中，父元素有border-radius和overflow: hidden。这一次我在子元素中添加了一个animation，那么overflow: hidden在Chr
浏览 1提问于2013-06-25得票数 7
首先，我要说，我不需要帮助解决这个问题--我自己可以很容易地解决我的具体问题。但是，我确实需要帮助理解为什么会发生这种情况--并且有可能确定它实际上是一个bug，所以我可以报告它。
问题是带有overflow:hidden的父容器包含一个带有负margin-bottom的子容器，该子容器又包含一个或多个floated项，后面跟着一个clear (即。它的高度取决于漂浮的孩子).似乎完全忽略了负值底部的边际。
我不希望孩子的内容在负的底限中扮演任何角色.无论孩子的内心是什么，我都希望负边际会得到尊重，而内容会被父母的overflow: hidden“切断”。
TL；博士:下面有一个更简单的例子
浏览 3提问于2017-10-18得票数 1
据我所知，overflow: hidden和display:inline-block都可以建立新的阻塞格式上下文，而阻塞格式上下文可以防止边缘崩溃。
但overflow:hidden不能防止兄弟姐妹之间的边缘崩溃，如display:inline-block。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-w
浏览 0提问于2019-01-01得票数 1
回答已采纳
1回答
我已经创建了一个网站，根据窗口屏幕的大小调整高度，这意味着没有滚动。它的工作正常，但在windows中的chrome上没有工作，甚至在Windows 7中的chrome中也是如此。
这是。
HTML：
<section id="mainWrapper">
<header>Header Content</header>
<div>panel Content</div>
<footer>Footer Content</footer>
</secti
浏览 2提问于2012-07-26得票数 0
我已经创建了一个滚动模式窗口，该窗口要求在模态打开时将overflow: hidden应用于主体，以防止身体滚动。然而，overflow: hidden会使我的身体跳到页面的顶部。为什么这就是我要防止这种情况发生的原因？
编辑：这里是我的<body>的css
body {
margin: 0 !important;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: subpixel-antialiased;
font-smooth: alw
浏览 4提问于2015-09-03得票数 10
2回答
我正在尝试创建一个div，用户可以在其中输入一些内容，内容长度应该仅扩展到300‘m(来自LHS)和高度100’m。如果内容超过这一点，它应该开始在空间的其余部分显示它(如图像所示的RHS)。我不想创建多个div，因为它是一个CMS，用户只需输入他们想要的文本，它应该自动传播到第二div后，填补一定的高度。没有脚本就能实现吗？我尽量避免看剧本
这是我迄今为止尝试过的代码。但只能换一行。不是第二次
div{
width:300px;
max-height:100px;
overflow:hidden;
text-align:justify;
word-break: break-a
浏览 0提问于2018-04-23得票数 0
回答已采纳
6回答
我不知道是否有问题，但我想知道为什么overflow:hidden在fixed父/子元素上不起作用。
下面是一个例子：
HTML和：
.parent{
position:fixed;
overflow:hidden;
width:300px;
height:300px;
background:#555;
}
.children{
position:fixed;
top:200px;
left:200px;
width:150px;
height:150px;
background:#333;
}
<div class="parent
浏览 41提问于2012-09-18得票数 66
回答已采纳
在Chrome或Firefox中不能正常工作。有什么解决办法吗？ <!DOCTYPE html>
<html>
<head></head>
<body>
<h3>overflow-y:visible</h3>
with overflow-x:hidden
<div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px; position:relative;ba
浏览 285提问于2018-03-12
2回答
由于最新的iPhone/iPad更新，边栏导航菜单在上下滚动时闪烁。
我试过很多方法，但都没有用。
第一次尝试是在打开菜单时防止滚动(主体)：
.overflow {
position:relative;
overflow:hidden;
height:100%;
}
不幸的是，这并没有解决这个问题，所以我尝试过这样做：
.overflow {
position:fixed;
overflow:hidden;
height:100%;
}
这是可行的，但当用户打开菜单时，页面会跳转到顶部，地址栏也会出现。我不是很好的用户体验。
我还试图将这一点添加到以下几个
浏览 3提问于2016-03-05得票数 0
回答已采纳
4回答
我在我的页面中使用了jQuery动画，它添加了一些CSS属性，我不明白为什么margin: auto不能工作。
HTML代码(带有由jQuery添加的样式属性)：
<body style="overflow: hidden;">
<div id="tuto_wamp" style="width: 7680px; height: 923px; ">
<!-- Step 1 -->
<div style="height: 549px; width: 1280px
浏览 3提问于2012-05-16得票数 5
回答已采纳
我在我们的应用程序中更新了DOCTYPE，一些小部件中的布局被破坏了。在一个列表中，以前没有滚动条，但是现在有一个滚动条，我不知道为什么(这个特定的问题可以在Chrome中复制)。我创建了一个简单的例子来说明这个问题：
<div style="overflow-x: hidden; overflow-y: auto; width: 152px; height: 60px;">
<div >
<div style="display: inline-block;" style="width: 152
浏览 3提问于2016-11-02得票数 0
3回答
有没有办法使overflow:hidden不适用于每一个孩子？
很小的例子：
<div class="parent" style="overflow:hidden; position: relative;">
...
<div class="hidden" style="top: -50px"> AA </div> <!-- overflowed and hidden -->
<div class="visible" style="bo
浏览 5提问于2016-08-15得票数 2
回答已采纳
1回答
我想防止身体滚动，如果显示覆盖。我对list元素使用lazyload，这意味着滚动事件侦听器需要一段时间。(下面的代码中替换为空循环。)
然而，设置overflow: hidden会导致覆盖滚动性能差，或者至少不如Windows上的Chrome83(带有触屏)和安卓，但是Firefox看起来不错。
overflow: hidden是如何发挥作用的呢？如何防止对性能的影响？
编辑：性能差意味着滚动时会出现明显的延迟。滚动不是平滑的，你可以感觉到内容跳跃，这是不好的用户体验。
<!DOCTYPE html>
<html lang="en">
<he
浏览 2提问于2020-07-09得票数 1
回答已采纳
为什么文本溢出不会隐藏在两个嵌套的flexbox div中？当它在一个div中时，它是有效的。
特别是:为什么内部的div比外部的div大？
浏览器: Chrome 52.0.2743.60
下面是一个最小的代码示例：
<style>
.outer {
display: flex;
width: 500px;
border: 2px solid red;
}
.inner {
display: flex;
border: 2px solid blue;
}
.text {
overflow: hidden;
white-space: nowrap;
浏览 1提问于2016-08-01得票数 1
复制小提琴:调整大小，直到垂直滚动条出现：
预期行为:在黄色区域使用时，鼠标轮滚动。
观察到的行为:在Chrome中不工作，在Firefox中工作很好。
HTML代码：
<div class="parent"><input /><div class="child"><div class="subChild"><input /></div></div></div>
CSS代码：
html,body{
overflow:hidden;
heig
浏览 2提问于2018-01-11得票数 6
回答已采纳
我认为Chrome中的<label>元素有一个错误：
<div style="border:1px green solid; overflow:hidden;height:20px;">
<div style="border:1px red solid;">
<div>visible</div>
<div style="position:absolute; border:1px solid;">
<div style="pos
浏览 2提问于2016-01-31得票数 1
在CSS中，我很难理解应该是一个初学者的任务：、滚动、和高地(当元素嵌套在超过1层深度时)。
我想设计一个布局，其中默认元素不会在父元素之后展开，如果是这样，overflow: auto就会启动并开始滚动。
不过，我不想在每个元素上设置height; 100%，因为我需要元素只占用所需的空间，因此一直试图在每个元素上使用max-height: 100%或max-height: inherit。
在使用height: 100%时，即使元素嵌套了几个层，也正确地获取了父元素的高度，如下所示：
html {
padding: 0;
margin: 0;
overflow: hidde
浏览 14提问于2022-03-07得票数 2
回答已采纳
IE没有什么问题，有什么完美的修复/解决方案吗？
寻找在子div的CSS属性下面使用的解决方案
display: inline-block;
当父div有2个子div时
第二个子div给出了预定义的width
第一个子div width是根据可用宽度动态计算的。
当子div具有如下代码段中给出的CSS属性时，IE中的父div滚动度量会有有线行为。scrollHeight与Chrome、Firefox、Edge等浏览器相比，IE中的像素变化很小。
当显示inline-block并隐藏内容overflow时，是否有适当的解决方案来定位子div而不产生任何副作用。
func
浏览 0提问于2018-03-07得票数 0
2回答
我很难理解，为什么溢出:隐藏被子类元素覆盖。请检查我创建的示例。
<div class="relative">
<div class="overflow">box with "overflow:hidden;" (HOVER ME)
<div class="absolute">absolute box which ignore "overflow:hidden;" rule of parent box</div>
</div&g
浏览 6提问于2014-07-04得票数 0
1回答
我不知道为什么，但是:hover在我的代码上不能在Firefox中工作。它在Chrome和Safari上运行得很好，甚至在IE中也运行得很好。
我也尝试过使用.over，但没有任何改变。
html代码：
<div id="proekti">
<article id="red1" class="sliki">
<span>
<div class="text">
<h3>&
浏览 0提问于2013-04-17得票数 0
1回答
因此，我有一个具有固定高度的div，宽度占据整个屏幕的宽度。我的目标是在添加太多内容时使div侧滚。
段落在Div中也有一个更薄的固定宽度。
我想要做的是让任何段落或内容在到达Div的底部时开始一个新的“栏”。有没有办法用jQuery或类似的东西来做到这一点？
.divClass {
width: 100%;
height: 50%;
border: 3px solid black;
position: absolute;
top: 25%;
left: 0px;
right: 0px;
clear: both;
back
浏览 0提问于2014-02-18得票数 0
2回答
我找到了我的
只适用于Chrome和FF，我不知道为什么它对IE没有省略号效果？希望有人能帮上忙，如果你能用CSS的方式解决它就更好了。
顺便说一句，div似乎在IE和Chrome上都有文本溢出:省略号效果。
css：
.ellip {
white-space: nowrap;
width: 200px;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
html：
<input type="text&#
浏览 5提问于2015-04-20得票数 2
1回答
在我的React应用程序中，我使用的是由服务器提供内容的iframe。没有在样式中添加任何关于overflow的内容，我只在Chrome中看到水平滚动条(没有可拖动的滚动条，只有条形)，而不是其他浏览器，比如FireFox和Edge。
添加overflow-x: hidden; i框架样式的包装器div如下
.article-container {
display: flex;
flex-direction: column;
flex: auto;
iframe {
flex: auto;
overflow-x: hidden;
}
iframe.bod
浏览 0提问于2019-04-05得票数 0
我已经为我的布局设置了一些div，一个主div和一个菜单div。
它们在Firefox上看起来很完美，但由于某种原因，Chrome和Safari搞砸了。
由于某些原因，当overflow:hidden;被添加到CSS中时，div的宽度会变小。我需要overflow:hidden;，因为我在主目录中还有其他的浮点数。你可以在这里看到这个例子：
它在Firefox中显示得很好，但在Safari和Chrome中，div的右边也有一个空白处。
浏览 3提问于2011-08-09得票数 8
回答已采纳
如果子对象为position:absolute，其父为overflow:hidden，而父为position:static，则子节点仍然溢出：
<div style="overflow:hidden;height:100px;border:2px solid red;">
<div style="position:absolute;height:200px;width:200px;background:blue;opacity:0.5">
</div>
</div>
如果父节点的位置不是static
浏览 4提问于2016-01-04得票数 7
回答已采纳
1回答
我的工作是在#parent中以100%的高度和宽度居中#child。为什么将#child顶部位置设置为10%有效，而使用10%作为页边距顶部却不起作用？
<style>
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
#parent {
width: 100%;
height: 100%;
background-color: #323232;
}
#c
浏览 0提问于2013-05-23得票数 2
回答已采纳
我想创建一个由两列组成的照片图库，每一列都有不同的高度，并且有一个带有一些解释的页脚。
我创建了一个包含两列的部分，一个卡片容器，并在其中放置了图像和带有页脚的div。
Chrome中的结果显示了第一列的最后一个卡片容器被打破，即分成两部分:第一列是图像，第二列是页脚。
#columns {
line-height: 0;
display: block;
column-count: 2;
column-gap: 100px;
}
#columns .container {
width: 100% ;
heig
浏览 2提问于2018-05-08得票数 0
1回答
不带滚动条的滚动
、、、、
示例表单：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {font:13px arial; color:white;}
body {background:black;}
label {display:inline-block; width:50px;}
input, textarea {margin:0; border:1px solid red; padding:0; background:green;}
浏览 1提问于2012-12-07得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
