博客

这里前端随记，比较杂 ~

都是之前遇到过得一些问题，这里统一整理一下，日后方便查阅！

添加阴影效果：

box-shadow: 0px 1px 10px 0px #ccc;

-moz-box-shadow: 2px 2px 10px #909090;
-webkit-box-shadow: 2px 2px 10px #909090;
box-shadow:2px 2px 10px #909090;

css设置文字上下居中，一行文字居中，两行或多行文字同样居中

/*flex垂直居中对齐*/
.align-center-vertical{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

实现单行文本的溢出显示省略号

/*单行文本溢出*/
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

/*多行文本溢出显示省略号*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;//超出3行显示省略号
overflow:hidden;

/*小程序超出自动换行*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all; /* 追加这一行代码 */

H5 移动端手机调试：vConsole调试

加上这段代码后，手机打开就可以看到右下角有一个【vConsole】的按钮，点击后可以监听请求和日志查看等等

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
</script>

rem

<script>
(function(){
var winW = $(window).width();
if(winW>768){winW = 768;}
$('html').css('font-size', winW / 7.5);
$(window).resize(function() {
winW = $(window).width();
if(winW>768){winW = 768;}
$('html').css('font-size', winW / 7.5);
})
})();
</script>