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; 删除线
7、滚动时隐藏滚动条
.view::-webkit-scrollbar {
display: none;
}