Css 整理

1 限制文本输入行数 超出部分溢出隐藏

display: -webkit-box; //规定元素应该生成的框的类型：将对象作为弹性伸缩盒显示
text-overflow: ellipsis; //规定当文本溢出包含元素时发生的事情：显示省略符号来代表被修剪的文本
-webkit-line-clamp: 1; //一个不规范的属性 用来限制文本行数
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
overflow: hidden; //规定当内容溢出元素框时发生的事情：内容会被修剪，并且其余内容是不可见

display: -webkit-box;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;

2 禁用iOS端点击元素时的背景高亮

• //不规范的属性
  该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。
  -webkit-tap-highlight-color:transparent;

-webkit-tap-highlight-color:transparent;

3 iOS端为没有弹性滚动的元素增加弹性滚动

• //创建了带有硬件加速的系统级控件，使得元素有了原生级别的弹性滚动，不过会增加内存的消耗

 -webkit-overflow-scrolling: touch;

4 关于word-break和word-wrap

word-wrap: normal | break-word;

//normal：调用浏览器默认行为，不会自动换行
//break-word：自动换行，保证完整性

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

//normal：调用浏览器默认行为，不会自动换行
//break-all：允许在单词内换行,不保证完整性

5 移动端禁用文本选中与图片选中

 //禁用文本选中
user-select:none;
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
-khtml-user-select:none;
//IE6-IE9写法
document.body.onselectstart=document.body.ondrag=function(){
    returnfalse;
}

//禁用图片选中
-webkit-touch-callout: none;
//实则是禁用了移动端系统默认菜单的触发

6 去除 display:inline-block 元素之间的间距

1.父元素 font-size: 0;
2.删除多余空格

font-size: 0;

7 移动端绑定的Dom点击事件失效

定义cursor属性

cursor: pointer;

8 垂直居中

方法一：（移动端推荐）

display:block;
position: absolute;
top:50%;
transform: translateY(-50%);
//注意其兼容性以及不要将子容器置于父容器半个像素的位置上(如500.5px)，否则子容器会出现模糊。

9 文字两端对齐

text-align-last: justify;

10 定义输入框光标颜色

caret-color: red;

11 页面图片黑白化

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

10 定义输入框光标颜色

caret-color: red;

11 页面图片黑白化

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

12 文字描边

text-shadow: 2px 0 #FFFFFF, 0 2px #FFFFFF, 0 -2px #FFFFFF, -2px 0 #FFFFFF;