5种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;强制不换行，都起作用

p{
 	word-wrap: break-word;
 	white-space: normal;
 	word-break: break-all;
}
/*不换行*/
.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;
}

6、设置滚动条样式

.test::-webkit-scrollbar{
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
}
.test::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
}