Блог

Главная - Вопросы по программированию - не допускать перемещения текста

не допускать перемещения текста

#javascript #html

#javascript #HTML

Вопрос:

У меня есть тег span внутри абзаца, который обновляется каждую секунду, и всякий раз, когда это происходит, он продолжает сдвигать текст вправо или влево:

 setInterval(() => {document.querySelector("#fruits").innerHTML = Date.now() % 20}, 1)  
 <p>Here is some text "<span id="fruits"></span>" Here is some more text</p>

Как я могу предотвратить перемещение слов?

Комментарии:

1. Использовать шрифт с моно-интервалом? Сделать элемент фиксированной ширины?

2. Вы могли бы обнулить целые числа, тогда они всегда были бы одинакового размера.

Ответ №1:

Добавьте этот стиль style="display: inline-block;width: 15px;" в span #fruits 

 setInterval(() => {document.querySelector("#fruits").innerHTML = Date.now() % 20}, 1);  
 <p>Here is some text "<span id="fruits" style="display: inline-block;width: 15px;"></span>" Here is some more text</p>

Ответ №2:

Использование дополнения "0" устранит проблему. Таким образом, он всегда ожидает две цифры.

 setInterval(() => {
  document.querySelector("#fruits").innerHTML = (Date.now() % 20)
    .toLocaleString('en-US', {
      minimumIntegerDigits: 2,
      useGrouping: false
    })
}, 1)  
 <p>Here is some text "<span id="fruits"></span>" Here is some more text</p>

Комментарии:

1. Мне нравится ваш подход, но он заставляет меня добавлять несколько цифр к результату