文字不可被选中

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

文字超出省略号...显示

• 只有一行：

  .ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; // 文字不换行
    width:  ...px; // (必须要设置宽度)
  }
  

• 文字有多行的时候：

  .ellipsis {
    text-overflow: ellipsis;
    display: -webkit-box;   // 开启特殊的文字风格展示
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;(超出多少行显示)
    width:  ...px;   // (必须要设置宽度)
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
  }
  

网页滤镜

html {
  filter: grayscale(1);   // 灰阶滤镜
}

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

• word-wrap: normal | break-word

  normal; 只在允许的区域断点换行（浏览器保持默认处理）

  break-word; 在长单词或url地址或者长数字内部进行换行，接下来区域放不下这个单词，令起一行开始显示，如果还是不够，会在单词内部换行。换行区域两端可能不是对齐的。、

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

  normal; 使用浏览器默认的换行规则。 默认不换行，单独一个

  break-all; 允许在单词内换行。在长单词或url地址或者长数字接下来区域放不下这个单词，单词也会仍然在当前位置继续显示，到容器限制宽度了放不下然后才换行。换行区域两端对齐，比较美观。

  keep-all; 只能在半角空格或连字符处换行，不允许文本中的单词换行。移动端不是很支持。

• white-sapce: normal ｜nowrap