关于CSS的文本的样式调试

1、CSS文本溢出显示省略号

单行隐藏语法：

	overflow:hidden;   //超出的文本隐藏
	text-overflow:ellipsis;  //溢出用省略号
 	white-space:nowrap;   //溢出时不要换行

多行隐藏语法：

	overflow: hidden;   
	text-overflow: ellipsis;
	display: -webkit-box;    //作为弹性伸缩盒子模型显示
	-webkit-line-clamp: 2;    //显示的行数
	-webkit-box-orient: vertical;   //伸缩盒子的子元素排列：从上到下

2、当内容超出div时，自动出现滚动条的条件

（1）内容必须在div中

（2）div要设置宽高

（3）overflow设置为auto

	overflow:auto;    //当内容宽度超出div宽度，或者内容高度超出div宽度，或者同时超出，会自动出现水平、或者垂直、或者水平和垂直滚动条。
	overflow-x:auto;  //当内容宽度超出div宽度，自动出现水平滚动条（x轴）
	overflow-y:auto;  //当内容宽度超出div高度，自动出现垂直滚动条（y轴）

左右滑动的滚动条：

	white-space: nowrap;   //规定段落文本不换行
	overflow-y:scroll;     //当内容宽度超出div高度，自动出现垂直滚动条（y轴）

有滚动效果并且隐藏滚动条则是：

.dining_number::-webkit-scrollbar{width:0;height:0} //主要设置滚动条的样式，高宽为0则行

改变滚动条的样式：、

	  .dining_number{
            overflow-x: hidden;
            overflow-y: auto;
            color: #000;
            font-size: .7rem;
            font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma;
            height: 100%;
        }
	/*滚动条样式*/
        .dining_number::-webkit-scrollbar {/*滚动条整体样式*/
            width: 20px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 20px;
        }
        .dining_number::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;  /*滚动条的圆角*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);  /*滚动条的颜色*/
        }
        .dining_number::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;/*滚动条里背景的圆角*/
            background: rgba(0,0,0,0.1);/*滚动条里背景的颜色*/
        }