div 内容超出后仍然一行显示, 自动显示横向滚动条
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.label-container {
width: auto;
overflow-y: hidden;
overflow-x: auto;
display: flex;
}
.color-orange {
color: orange;
}
.color-green {
color: green;
}
.padding-0-10 {
padding: 0 10px;
}
.div-container {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
display: flex;
}
.div-container div {
display: inline;
}
</style>
</head>
<body>
<div class="label-container">
<label class="color-orange">abc</label><label class="color-green padding-0-10"> > </label>
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabc</label> >
<label>123</label> >
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabccj3838388383888838383838388</label> >
<label>abc</label> >
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabc</label> >
<label>123</label> >
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabccj3838388383888838383838388</label> >
<label>abc</label> >
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabc</label> >
<label>123</label> >
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabccj3838388383888838383838388</label> >
<label>abc</label> >
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabc</label> >
<label>123</label> >
<label>abcabcabcabcabcabcabcabcabcabcabcabcabcabccj3838388383888838383838388</label> >
</div>
<br><br>
<div class="div-container">
<div>abc / jjjj jkjk sdfjksdfjdsfkdsf / jjjj jkjk
</div>
<div><span>dddddddddddddddd </span> > </div>
<div><span>sdfjksdfjdsfkdsf </span> > </div>
<div><span>sdfjksdfjdsfkdsf </span> > </div>
<div>sdfjksdfjdsfkdsf > </div>
<div>sdfjksdfjdsfkdsf > </div>
<div>sdfjksdfjdsfkdsf > </div>
<div>sdfjksdfjdsfkdsf / </div> /
<div>sdfjksdfjdsfkdsf / jjjj jkjk </div> /
<div>sdfjks / dfjdsfkdsf </div> /
<div>sdfjksdfjdsfkdsf </div> /
<div>sdfjksdfjdsfkdsf </div> >
<div>sdfjksdfjdsfkdsf </div> >
<div>sdfjksdfjdsfkdsf </div> >
<div>sdfjksdfjdsfkdsf </div> >
<div>sdfjksdfjdsfkdsf </div> >
<div>sdfjksdfjdsfkdsf </div> >
<div>sdfjksdfjdsfkdsf </div> >
</div>
</body>
</html>
注意
在 Vue 项目中， 数据动态绑定后， 如果超出内容宽度， 不会出现横向滚动条。
网友评论