日常工作遇到的tips

一、多行省略的方法
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:-webkit-box; 
-webkit-box-orient:vertical; 
-webkit-line-clamp:2;

二、使用伪类进行遮盖该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
1、将height设置为line-height的整数倍，防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：…）；兼容ie8需要将::after替换成:after
三、对于h5的placeholder在各个浏览器中兼容性问题
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
还有最好不要社会行高，会使文字的位置偏上，如在大三星手机里面就会出现这种问题，解决方法：不使用行高（或者设置成line-
height：normal）使用padding来实现位置的设置问题
四、CSS强制英文、中文换行与不换行 强制英文换行
1. word-break:break-all;只对英文起作用，以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用，强制换行
4. white-space:nowrap; 强制不换行，都起作用5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行，超出部分隐藏且以省略号形式出现（部分浏览器支持）