请查看以下代码段。 此代码的目的是显示动态文件夹列表。
我在一些可滚动的内容中有按钮。当按钮有一个长文本时(见第三个按钮),文本"溢出"在垂直滚动条下。
我尝试将文本包含到Bootstrap面板主体中,该面板主体具有15px填充。 不幸的是,按钮文本在滚动条区域保持可见。
编辑:长文本穿过垂直滚动条。我尽量避免文本和滚动条的叠加。
寻找你的建议。非常感谢。
Bootstrap 3.3.7,jQuery 2.1.4,jQuery-scrollbar 0.2.11
$(document).ready(function () {
$('.scrollbar-macosx').scrollbar();
});

.cust-tree{
font-size: 12px;
margin-bottom: 20px;
}
.cust-tree button {
background: none;
border: none;
padding: 0;
padding-left: 25px;
line-height: 20px;
}
.cust-tree button::before {
content: "";
width: 18px;
font-style: normal;
height: 18px;
display: inline-block;
position: relative;
float: left;
margin-left: -25px;
line-height: 18px;
}
.cust-tree.files .file {
padding-left: 25px;
cursor: pointer;
line-height: 18px;
}
.group-list.scroll-wrapper {
max-height:75px;
}

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css" type="text/css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
<div class="panel panel-default">
<div id="menu_grp" class="panel-body scrollbar-macosx group-list">
<div class="panel-body cust-tree" id="divScriptMenu">
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST3TEST3TEST3TEST3TEST3TEST3TEST3TEST3TEST3TEST3</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
&#13;
答案 0 :(得分:0)
您是否尝试删除水平滚动条?你只需要使用;
overflow-x: hidden;
$(document).ready(function () {
$('.scrollbar-macosx').scrollbar();
});
.cust-tree{
font-size: 12px;
margin-bottom: 20px;
overflow-x:hidden;
}
.cust-tree button {
background: none;
border: none;
padding: 0;
padding-left: 25px;
line-height: 20px;
}
.cust-tree button::before {
content: "";
width: 18px;
font-style: normal;
height: 18px;
display: inline-block;
position: relative;
float: left;
margin-left: -25px;
line-height: 18px;
}
.cust-tree.files .file {
padding-left: 25px;
cursor: pointer;
line-height: 18px;
}
.group-list.scroll-wrapper {
max-height:75px;
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css" type="text/css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-3">
<div class="panel panel-default">
<div id="menu_grp" class="panel-body scrollbar-macosx group-list">
<div class="panel-body cust-tree" id="divScriptMenu">
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST3TEST3TEST3TEST3TEST3TEST3TEST3TEST3TEST3TEST3</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
<div><button type="button">TEST</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>