- css 一行文本超出…
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
2.多行文本超出显示…
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
3.IOS 手机容器滚动条滑动不流畅
overflow: auto;
-webkit-overflow-scrolling: touch;
4.修改滚动条样式
隐藏 div 元素的滚动条
div::-webkit-scrollbar {
display: none;
}
5.使用 css 写出一个三角形角标
元素宽高设置为 0,通过 border 属性来设置,让其它三个方向的 border 颜色为透明或者和背景色保持一致,剩余一条 border 的颜色设置为需要的颜色
div {
width: 0;
height: 0;
border: 5px solid #transparent;
border-top-color: red;
}
6.解决 ios audio 无法自动播放、循环播放的问题
ios 手机在使用 audio 或者 video 播放的时候,个别机型无法实现自动播放,可使用下面的代码 hack。
// 解决ios audio无法自动播放、循环播放的问题
var music = document.getElementById('video');
var state = 0;
document.addEventListener('touchstart', function(){
if(state==0){
music.play();
state=1;
}
}, false);
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//循环播放
music.onended = function () {
music.load();
music.play();
}
7.水平垂直居中
我一般只使用两种方式 定位 或者 flex,我觉得够用了。
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
父级控制子集居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}