文字不可被選中

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

文字超出省略號(hào)...顯示

• 只有一行：

  .ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; // 文字不換行
    width:  ...px; // (必須要設(shè)置寬度)
  }
  

• 文字有多行的時(shí)候：

  .ellipsis {
    text-overflow: ellipsis;
    display: -webkit-box;   // 開(kāi)啟特殊的文字風(fēng)格展示
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;(超出多少行顯示)
    width:  ...px;   // (必須要設(shè)置寬度)
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
  }
  

網(wǎng)頁(yè)濾鏡

html {
  filter: grayscale(1);   // 灰階濾鏡
}

文字換行 word-break | word-wrap | white-sapce: normal

• word-wrap: normal | break-word

  normal; 只在允許的區(qū)域斷點(diǎn)換行（瀏覽器保持默認(rèn)處理）

  break-word; 在長(zhǎng)單詞或url地址或者長(zhǎng)數(shù)字內(nèi)部進(jìn)行換行，接下來(lái)區(qū)域放不下這個(gè)單詞，令起一行開(kāi)始顯示，如果還是不夠，會(huì)在單詞內(nèi)部換行。換行區(qū)域兩端可能不是對(duì)齊的。、

• word-break: normal | break-all | keep-all

  normal; 使用瀏覽器默認(rèn)的換行規(guī)則。 默認(rèn)不換行，單獨(dú)一個(gè)

  break-all; 允許在單詞內(nèi)換行。在長(zhǎng)單詞或url地址或者長(zhǎng)數(shù)字接下來(lái)區(qū)域放不下這個(gè)單詞，單詞也會(huì)仍然在當(dāng)前位置繼續(xù)顯示，到容器限制寬度了放不下然后才換行。換行區(qū)域兩端對(duì)齊，比較美觀。

  keep-all; 只能在半角空格或連字符處換行，不允許文本中的單詞換行。移動(dòng)端不是很支持。

• white-sapce: normal ｜nowrap