《转》文章太长，实现滚动条控制排版
文本过长省略：
.scroll { width:60px; text-overflow:ellipsis; overflow: hidden; white-space: nowrap; }
<style type="text/css">
.scroll {
width: 600px; /*宽度*/
height: 200px; /*高度*/
color: ; /*颜色*/
font-family:黑体; /*字体*/
padding-left: 10px; /*层内左边距*/
padding-right: 10px; /*层内右边距*/
padding-top: 10px; /*层内上边距*/
padding-bottom: 10px; /*层内下边距*/
overflow-x: scroll; /*横向滚动条(scroll:始终出现;auto:必要时出现;具体参考CSS
文档)*/
overflow-y: scroll; /*竖向滚动条*/
}
</style>
如图：
--------------------------------------------------------------------------------------------
调用如下：
<html>
<body>
<div class="scroll">
<!--在此添加想要显示的内容 -->
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</body>
</html>
================================================================
一下是简单的滚动条
<DIV style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: auto;WIDTH: 445px; SCROLLBAR-SHADOW-COLOR: #3d5054; SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;SCROLLBAR-DARKSHADOW-COLOR: #85989c; HEIGHT: 200px" align=center> <P align=left>文字内容啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</P> </DIV>
----------------------------------------------------------------------------------------------------
第二部分： 滚动条美化
滚动条的css样式主要有三部分组成：
1、::-webkit-scrollbar 定义了滚动条整体的样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；
下面以overflow-y:auto;为例（overflow-x:auto同）
html:
<div class="test test-1"> <div class="scrollbar"></div> </div>
css代码：
.test{ width: 50px; height: 200px; overflow: auto; float: left; margin: 5px; border: none; } .scrollbar{ width: 30px; height: 300px; margin: 0 auto; } .test-1::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353; } .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; }
效果如下：
