文字不可被选中
.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
