话不多说，直接看代码
<!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>
扫一扫
5667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
