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.中英文自动换行

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.设置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;
}

4.字母大小写转换

p {text-transform: uppercase}  /** 将所有字母变成大写字母 */
p {text-transform: lowercase}  /** 将所有字母变成小写字母 */
p {text-transform: capitalize} /** 首字母大写 */
p {font-variant: small-caps}   /** 将字体变成小型的大写字母 */

5.识别字符串中的'\n'并换行

/** 一般在富文本中返回换行符不是<br>的标签，而且\n。不使用正则转换的情况下，可通过下面样式实现换 **/

body {
   white-space: pre-line;
}

6.子元素固定宽度父元素宽度被撑开

/** 父元素下的子元素是行内元素 */
.wrap {
  white-space: nowrap;
}
/** 若父元素下的子元素是块级元素 */
.wrap {
  white-space: nowrap; 
  display: inline-block;
}

7.让DIV中的图片和文字同时垂直居中

.wrap {
  height: 100;
  line-height: 100;
}
img {
  vertival-align：middle;
}
/** vertical-align css的属性vertical-align用来指定行内元素（inline）或表格单元格（table-cell） */ /** 元素的垂直对齐方式。只对行内元素、表格单元格元素生效，不能用它垂直对齐块级元素 */
/** vertical-align：baseline/top/middle/bottom/sub/text-top; */

8.使用伪类显示链接之后的URL

<a href="https://www.csdn.net/"> CSDN </a>
<style>
a:after {content: " (" attr(href) ")";}
</style>

9.隐藏滚动条同时又可以滚动

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}

10.设置滚动条样式

.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;
}