如果我使用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;
}
从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;
}