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/" target="_blank" rel="external nofollow" > 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;
}