提问者:小点点

我无法理解以下示例的overflow-x和overflow-y属性


如果我使用overflow-y=scroll; 属性时,文本将像往常一样垂直滚动。 但是同样,如果我使用overflow-x=scroll; 属性时,我在浏览器中看到该框显示左箭头和右箭头。 但是我不能左右滚动,更确切地说是水平滚动。 文本仍然垂直滚动。 为什么在这种情况下文本没有水平滚动???

/* Here is the example of overflow property */
.box {
    height: 100px;
    width: 200px;
    border: 4px solid green;
    overflow-x: scroll;
}

.box {
    height: 100px;
    width: 200px;
    border: 4px solid green;
    overflow-y: scroll;
}


共2个答案

匿名用户

从MDN文档中,

Overflow-X CSS属性设置内容溢出块级元素的左右边缘时显示的内容。 这可能是什么都不是,一个滚动条,或溢出内容。

在您的示例中,内容没有溢出边缘,并且简单地换行到下一行。 这是因为容器中可能有简单的文本,而文本的word-wrap属性的正常值是normal(它“只在允许的断点断字”)。 所以短信就结束了。

例如,如果您的div内部超过了这个容器的宽度,那么您的overflow属性就会起作用。 或者,如果您的文本是一个没有空格的连续字符串(因此不允许用normal换行),且宽度大于父文本的宽度,则滚动条是可见的。

我在下面添加了一些例子来演示这一点:

null

.box {
  border: 1px solid black;
  height: 200px;
  width: 100px;
  margin: 10px;
  font-family: sans-serif;
  display: inline-block;
}

.long-box {
 width: 300px;
}

.scroll-x {
  overflow-x: scroll;
}

.word-wrap {
  word-wrap: break-word;
}
<!-- 
    Doesnot scroll, 
    width adheres to left/right edges 
-->
<div class='box scroll-x'>
  <b>Will not scroll</b>
  Scroll X with content less than width
</div>

<!-- 
     Will not scroll, 
     because of the really long word,
     and since `word-wrap` by default is `normal` so the content overflows 
-->
<div class='box scroll-x'>
  <b>Will scroll</b>
    Scroll X with content greater than width 
  LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>

<!--
     Will not scroll 
     because this now has `word-wrap` set to `break-word`-->
<div class='box scroll-x word-wrap'>
  <b>Will not scroll</b>
  Scroll X with content greater than width but with word wrap
  LoremipsumLoreLoremipsumLoremLoremipsumLoremLoremipsumLorem
</div>

<!-- 
     Will scroll, 
     because of the div inside,
     that is 300px, i.e > width of box (200px) 
-->
<div class='box scroll-x'>
  <b>Will scroll</b>
  Scroll X with content (long-box) greater width 
  <div class='long-box'>...</div>
</div>

匿名用户

试试这个。

null

.yourclass {
  overflow-y: auto;
}

.yourclass {
  overflow-x: auto;
}