时间戳

首页 > 解决方案 > 如何阻止居中更改文本移动

javascript - 如何阻止居中更改文本移动

问题描述

最近我下载了一个文本旋转器插件。效果很好，但有一个小问题。每次更改文本时，整个标题都会移动，因为它是居中的。

这里举个简单的例子：（不介意js代码，只是插件的简化示例）

HTML

<h1>
Heading <span class="change">Change</span>
</h1>

CSS

h1 {
  text-align: center;
}

JS

var itr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var  interval = 1000; //one second
itr.forEach((itr, index) => {
setTimeout(() => {
    $('.change').text('Car');
            setTimeout(() => {
            $('.change').text('Boat');
                    setTimeout(() => {
                    $('.change').text('Helicopter');
                    }, index * interval
                   );
          }, index * interval
         );
  }, index * interval
 );
})

你可以在这里试试：https ://jsfiddle.net/teku3a0w/1/
有没有办法阻止标题在改变时移动？

永久保证金肯定是一个答案，但我希望它能够响应。

标签： javascripthtmlcss

解决方案

我自己找到了一个很好的解决方案。

.change{
  display: inline-block;
    width: 150px;
    text-align: left;
}

我为变化的部分添加了固定宽度。
请注意，宽度必须足够大以包含列表中最长的单词。

你可以在这里试试：https ://jsfiddle.net/0Lqpj2zc/

推荐阅读