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

这篇博客主要记录了前端开发中的一些常见样式应用,如只显示一行、两行内容的处理,浮动清除,以及如何在添加元素时保持滚动条在底部。还涉及到JavaScript操作,如修改伪类content,监听输入框回车事件,处理ID特殊字符,以及兼容各种特殊字符。此外,博主分享了如何去除小数后的零,进行数据格式化,以及将阿拉伯数字转换为中文数字的方法。最后讨论了动画实现,如animate和requestAnimationFrame,以及一些实用的数组和对象操作技巧。
摘要由CSDN通过智能技术生成

记录自己常用的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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值