Question

我有一个简单的HTML DIV，其中单词“ Loading”在中间。我也有JavaScript代码来更改#waitDotDotDot元素中的点。

var dots = window.setInterval( function() {
  var wait = document.getElementById("waitDotDotDot");
  if ( wait.innerHTML.length > 5 ) 
    wait.innerHTML = "";
  else 
    wait.innerHTML += ".";
}, 300);

<div style="width: 90%; text-align:center; margin-right:auto; margin-left:auto; border: 1px solid black;">
  <div style="margin-right:auto; margin-left:auto; width:90%;">
    Loading <span id="waitDotDotDot">.</span>
  </div>
</div>

这是可行的，但是当点数增加时，它将继续调整“正在加载”文本的大小（将其向左推）。有没有办法将“正在加载”的文本保持在相同的位置（仍然居中），但是在增加点的同时仅调整点的大小？

Answer 1

出于这种效果，我个人希望放弃该脚本以使其保持简单并同时解决问题。

.container {
  border: green 1px dashed;
}

.dotme {
  margin-left: calc(50% - 4rem); 
  transform: translateX(-50%);
  display: inline;
  font-size: 2rem;
  border: red 1px dotted;
}

.dotme:after {
  content: "\2026";
  display: inline-block;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;     
  animation: dots steps(4,end) .75s infinite alternate;  
}

@keyframes dots {
  to { width: 3rem;}
}

<div class="container">
  <aside class="dotme">Loading</aside>
</div>

Answer 2

我修改了Chris W.的帖子，以达到预期的效果。

.divWrapper {
  width: 100%;
  text-align: center;
}

.loading {
  font-size: 2rem;
  display: inline-block;
}

.dots {
  visibility: hidden;
  position: relative;
}

.dots::before {
  content: "\2026";
  visibility: visible;
  display: inline-block;
  position: absolute;
  width: 0;
  overflow: hidden;
  vertical-align: bottom;
  animation: dots steps(4,end) 1s infinite forwards;
}

@keyframes dots {
  to { width: 2.5rem;}
}

<div class="divWrapper">
  <p class="loading">
    Loading<span class="dots">&#x2026;</span>
  </p>
</div>

CSS-调整大小时防止文本移动

2 个答案: