html里字体重叠解决方法

小陈同学^ ^

于 2023-07-11 14:35:05 发布

阅读量2.1k

点赞数

文章标签： html 前端 css javascript

话不多说，直接看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex解决字体重叠</title>
<style type="text/css">
#wrap{
   width: 160px;
   height: 40px;
   border: 1px solid;
   overflow: hidden;

}
#deom{
   text-align: center;
   line-height: 5px;
   font-size: 20px;
   color: red;
   flex: none;
}
</style>
</head>
<body>
<div id="wrap">
<p id="deom">欢迎光临洗衣店</p>
</div>
<script type="text/javascript">
   var left=0;
   var timer;
   var deom=document.getElementById('deom');
   run()
function run(){
   this.left=this.left-1;
   if(this.left==-300){
       this,left=140;
   }
deom.style.marginLeft=left+'px';
               timer=setTimeout('run()',10);
               console.log(left)
}
</script>
</body>
</html>

运行出来的结果如下

字体重叠了，解决办法是在 #wrap样式中加一个display属性，display:flex 在 #deom样式设为flex:none即可

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex解决字体重叠</title>
<style type="text/css">
#wrap{
   width: 160px;
   height: 40px;
   border: 1px solid;
   overflow: hidden;
display: flex;
}
#deom{
   text-align: center;
   line-height: 5px;
   font-size: 20px;
   color: red;
   flex: none;
}
</style>
</head>
<body>
<div id="wrap">
<p id="deom">欢迎光临洗衣店</p>
</div>
<script type="text/javascript">
   var left=0;
   var timer;
   var deom=document.getElementById('deom');
   run()
function run(){
   this.left=this.left-1;
   if(this.left==-300){
       this,left=140;
   }
deom.style.marginLeft=left+'px';
               timer=setTimeout('run()',10);
               console.log(left)
}
</script>
</body>
</html>