Question

到目前为止，我实现了一个按钮，当用户点击它时，它会显示一个加载文本，其中每500毫秒有一些点出现/消失，指出正在发生的事情。

请参阅bootply上的示例。

问题是文本会在按钮内移动。我的方法是在结尾填充带有空格的buttontext，但这不起作用，因为HTML解释器将删除所有多个空格。有什么建议我怎么能实现按钮的文字没有在按钮内移动？

HTML：

String icon;
public String getIcon() {
    return icon;
}
public void setIcon(String icon) {
    this.icon = icon;
}

public list(String icon, String name, String tips) {
    super();
    this.icon = icon;
    this.name = name;
    this.tips = tips;
}

JS：

<button id="buttonTextShowPath">Click me</button>

Answer 1

您可以使用 代替空格。它们会影响文本的宽度。

如果您不使用单空格字体，则您所需的 个数可能会与.的数量不同。

以下是应该按照您的要求执行的代码版本：

var $btn = $('#space_button');
var originalHTML = $btn.html();
var counter = 0;

setInterval(function(){

  var newHTML = originalHTML;
  
  for (var i=0; i < counter; i++) {
  	newHTML = newHTML.replace('&nbsp;', '.');
  }
  
  $btn.html(newHTML);
  
  counter++;
  
  if (counter > 5) counter = 0;

}, 200);

#space_button {
  min-width: 180px;
  text-align: center;
  background-color: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="space_button">
Hello World&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</button>

当文本连续变化时，如何避免在按钮内移动文本？

1 个答案: