49个常用的CSS代码片段

1、文字超出部分显示省略号

单行文本的溢出显示省略号（一定要有宽度）

 p{    width:200rpx;    overflow: hidden;    text-overflow:ellipsis;    white-space: nowrap; }

多行文本溢出显示省略号

p {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 3;    overflow: hidden; }

2、中英文自动换行

word-break:break-all;只对英文起作用，以字母作为换行依据

word-wrap:break-word; 只对英文起作用，以单词作为换行依据

white-space:pre-wrap; 只对中文起作用，强制换行

white-space:nowrap; 强制不换行，都起作用

1. p{

2. word-wrap: break-word;

3. white-space: normal;

4. word-break: break-all;

5. }

//不换行.wrap {  white-space:nowrap;}//自动换行.wrap {  word-wrap: break-word;  word-break: normal;}//强制换行.wrap {  word-break:break-all;}

3、文字阴影

text-shadow 为网页字体添加阴影，通过对text-shadow属性设置相关的属性值。

属性与值的说明如下：

text-shadow: [X-offset,Y-offset,Blur,Color];

X-offset:指阴影居于字体水平偏移的位置。
Y-offset:指阴影居于字体垂直偏移的位置。
Blur:指阴影的模糊值。
color:指阴影的颜色；

h1{text-shadow: 5px 5px 5px #FF0000;}

4、设置placeholder的字体样式

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */  color: red;}input::-moz-placeholder { /* Firefox 19+ */  color: red;}input:-ms-input-placeholder { /* IE 10+ */  color: red;}input:-moz-placeholder { /* Firefox 18- */  color: red;}

5、不固定高宽 div 垂直居中的方法

方法一：伪元素和 inline-block / vertical-align（兼容 IE8）

.box-wrap:before {      content: '';      display: inline-block;      height: 100%;      vertical-align: middle;      margin-right: -0.25em; //微调整空格}.box {     display: inline-block;     vertical-align: middle;}

方法二：flex(不兼容 ie8 以下)

.box-wrap {     height: 300px;     justify-content:center;     align-items:center;     display:flex;     background-color:#666; }

方法三：transform(不兼容 ie8 以下)

1. .box-wrap {

2. width:100%;

3. height:300px;

4. background:rgba(0,0,0,0.7);

5. position:relative;

6. }

7. .box{

8. position:absolute;

9. left:50%;

10. top:50%;

11. transform:translateX(-50%) translateY(-50%);

12. -webkit-transform:translateX(-50%) translateY(-50%);

13. }

方法四：设置 margin:auto（该方法的严格意义上的非固定宽高，而是 50%的父级的宽高。）

.box-wrap {    position: relative;    width:100%;    height:300px;    background-color:#f00;}.box-content{    position: absolute;    top:0;    left:0;    bottom:0;    right:0;    width:50%;    height:50%;    margin:auto;    background-color:#ff0;}

6、解决IOS页面滑动卡顿

body,html{    -webkit-overflow-scrolling: touch;}

7、设置滚动条样式

.test::-webkit-scrollbar{  /*滚动条整体样式*/  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/  height: 1px;}.test::-webkit-scrollbar-thumb {  /*滚动条里面小方块*/  border-radius   : 10px;  background-color: skyblue;  background-i