Question

我正在Angular项目中加载页面的前端部分工作。我想显示加载三个点，从一个点开始，然后是两个，然后是三个，以创建一种加载感。但是当我添加加载文本的点时，它会被推到左边，当点加到一个加载文本向右移动时。

代码以角度

编写

以下是代码：

对于HTML文件：

<div class="textCamel">Loading<span id="loader-loading-dots"></span></div>

对于CSS文件：

.textCamel {
    position:absolute;
    width: 100%;
    text-align: center;
    font-size: 18px;
    margin: 0 auto;

}

对于类型脚本文件

 export class LoaderComponent implements OnInit {
    ngOnInit() {
        // TODO: start CSS animation
        this.initLoadingDots();
    }
    // This method initializes the loading dots animation
    initLoadingDots() {
        let x=0;
        setInterval(function() {
            let dots = "";
            x++;
            for (let y=0; y <= x%3; y++) {
                dots+=".";
            }
            $("#loader-loading-dots").text(dots);
        } , 500);
    }  
}

如果有人能提供解决此问题的一些提示，我真的很感激。

Answer 1

您可以使用text-align:left代替将所有内容放在与中心对齐的容器中，并使用固定宽度始终具有相同的行为。

只需确保您使用的宽度将包含最大文本（加载+ 3个点）以避免溢出，即使它不是一个大问题，因为默认情况下会显示溢出，除非您有另一种隐藏它的样式：

.textCamel {
  /*position:absolute; removed this to show the result of the 3 divs */
  width: 100%;
  text-align: center;
  font-size: 18px;
  margin: 0 auto;
}

.load {
  display: inline-block;
  text-align: left;
  width: 80px;
}

<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots"></span></div>

</div>
<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots">.</span></div>

</div>
<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots">..</span></div>

</div>
<div class="textCamel">

  <div class="load">Loading<span id="loader-loading-dots">...</span></div>

</div>

如何防止在添加文字或删除文字时左右推文字

1 个答案: