关于CSS的文本的样式调试

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

有宽度并且自动换行防止内容溢出（中文，英文，数字，字符）：

word-break:break-all;

识别\n换行符：

white-space: pre-wrap;

单行隐藏语法：

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

多行隐藏语法：

	overflow: hidden;        /*超出的文本隐藏*/
	text-overflow: ellipsis;     /* 溢出用省略号*/
	display: -webkit-box;   /*作为弹性伸缩盒子模型显示*/
	-webkit-line-clamp: 2;    /*显示的行数*/
	-webkit-box-orient: vertical;   /*伸缩盒子的子元素排列：从上到下*/

多行隐藏语法并且自动换行：

 white-space: normal;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 4;
 -webkit-box-orient: vertical;
 word-break: break-all; //单词内自动换行,如果一个单词很长的话

table中td内容过长 省略号显示：

 table{  
      table-layout: fixed;/*(允许设置列宽,通过th)  默认为 table-layout: automatic 默认每一列列宽均分(不可设置列宽)*/
      width: 98%;
    }
    table td{
      text-overflow: ellipsis; /* for IE 隐藏的字符用省略号表示 */
      -moz-text-overflow: ellipsis; /* for Firefox,mozilla */
      overflow: hidden;/*超出隐藏*/
      white-space: nowrap;/*控制单行显示*/
      text-align: center;
    }

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);/*滚动条里背景的颜色*/
        }

以上是本章全部内容