css常用知识点汇总（不定期更新）

1、单行文字显示

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

2、两行文字显示

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

注：在微信小程序开发中遇到-webkit-box-orient失效问题，网上查找发现是编译的时候给过滤掉了，用了网友的一位黑科技手法给解决了：改变方式，关闭 autoprefixer 然后再开启：用注释就可以做到，简直黑科技。

 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 /* autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */

原文链接：https://blog.csdn.net/Candy_home/java/article/details/79646655
3、过滤所有的html标签

string.replace(/<.*?>/g, '')

参考链接：https://www.cnblogs.com/loveamyforever/p/7454557.html
4、img图片等比例缩放

img {  
    width: auto;  
    height: auto;  
    max-width: 100%;  
    max-height: 100%;     
}

根据父容器的自动缩放，并保持图片原来的比例。
5、设置input的placeholder字体大小、颜色
方式1：因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 16px;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
} 

方式2：建议使用该方式 如果是在手机客户端webview 只使用－webkit内核方式即可。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #666;
  font-size: 16px;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #666;
  font-size: 16px;
}

6、添加删除线

text-decoration: underline;     下划线
text-decoration: overline;    顶划线 
text-decoration: line-through;  删除线