记录自己常用的CSS样式
- 只显示一行,其他省略号
.text-ellipsis {
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
}
- 只显示两行,其他省略号
.text-ellipsis-2{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow-wrap: break-word;
}
- 清除浮动
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
- 向容器添加元素时,需要滚动条滚动到最底部
const content = document.getElementById('id');.
content.scrollTop = content.scrollHeight;
// 一个API
Element.scrollIntoView() ;
- 循环创建大量dom时
const content = document.getElementById('id'); //追加的地方
const domFragment = document.createDocumentFragment(); // 使用碎片文档
arr.forEach(item => {
const li = document.createElement('li');
....
domFragment .appendChild(li); // 添加到碎片文档中
});
content.appendChild(domFragment ); // 一次性添加,避免循环操作dom
// 如果有需要还可以结合父元素 事件委托 来优化事件绑定
- js修改伪类的content
.num:before{
position: absolute;
content: attr(content);
}
const num = document.getElementsByClassName('num');
num.setAttribute('content', '设置的内容');
- 文字删除线
text-decoration:underline; 下划线
text-decoration:overline; 顶划线
text-decor