<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8" />
<style>
.parent {
height: 80px;
width: 100px;
overflow: hidden;
}
.content{
height: 80px;
width: 126px; /* 多出26像素是滚动条的位置，会被父容器盖住就看不到了 */
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
<p>整一长段文章进来看效果</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8" />
<style>
.parent {
height: 80px;
width: 100px;
overflow: hidden;
}
.content {
height: 106px; /* 多出26像素是滚动条的位置，会被父容器盖住就看不到了 */
width: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
p {
white-space: nowrap; /* 不换行 */
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
<p>整一长段文章进来看效果</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="utf-8" />
<style>
.outer-container,.content {
width: 200px; height: 200px;
}
.outer-container {
position: relative;
overflow: hidden;
}
.inner-container {
position: absolute; left: 0;
overflow-x: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="outer-container">
<div class="inner-container">
<div class="content">
整一长段文章进来看效果
</div>
</div>
</div>
</body>
</html>
网友评论