前端常用样式、方法、奇葩问题积累

记录自己常用的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