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 {&nbsp; border: green 1px dashed;}.dotme {&nbsp; margin-left: calc(50% - 4rem);&nbsp;&nbsp; transform: translateX(-50%);&nbsp; display: inline;&nbsp; font-size: 2rem;&nbsp; border: red 1px dotted;}.dotme:after {&nbsp; content: "\2026";&nbsp; display: inline-block;&nbsp; width: 0;&nbsp; overflow: hidden;&nbsp; vertical-align: bottom;&nbsp; &nbsp; &nbsp;&nbsp; animation: dots steps(4,end) .75s infinite alternate;&nbsp;&nbsp;}@keyframes dots {&nbsp; to { width: 3rem;}}<div class="container">&nbsp; <aside class="dotme">Loading</aside></div>

Answer 2

我修改了 Chris W. 的帖子以达到预期的结果。.divWrapper {&nbsp; width: 100%;&nbsp; text-align: center;}.loading {&nbsp; font-size: 2rem;&nbsp; display: inline-block;}.dots {&nbsp; visibility: hidden;&nbsp; position: relative;}.dots::before {&nbsp; content: "\2026";&nbsp; visibility: visible;&nbsp; display: inline-block;&nbsp; position: absolute;&nbsp; width: 0;&nbsp; overflow: hidden;&nbsp; vertical-align: bottom;&nbsp; animation: dots steps(4,end) 1s infinite forwards;}@keyframes dots {&nbsp; to { width: 2.5rem;}}<div class="divWrapper">&nbsp; <p class="loading">&nbsp; &nbsp; Loading<span class="dots">&#x2026;</span>&nbsp; </p></div>