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

Question

我有这个简单的 HTML DIV，中间有“加载”这个词。我还有用于更改#waitDotDotDot元素中点的 JavaScript 代码。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>