Автоматический перенос слов при побуквенном написания текста

Question

Можно ли сделать так, чтобы при побуквенном написании текста он сразу переносился на строку ниже, а не писался до тех пор пока не перестанет вмещаться в ширину блока? Для понимания проблемы вот код:

text = 'В рамках спецификации современных стандартов, многие известные личности неоднозначны и будут превращены в посмешище, хотя само их существование приносит несомненную пользу обществу.'

for (i = 0; i < text.length; i++) setTimeout(function(){
  document.getElementById('container').innerHTML += text.charAt(this)
}.bind(i), i*30)

#container {width: 300px; height: 100px; padding: 25px; border: 2px solid #222; border-radius: 5px;}

<div id = 'container'></div>

Нужно сделать так, чтобы слова писались сразу на новой строке если не помещаются по ширине в блок. Есть идеи?

Answer 1

Разве что гипотезы.

Поскольку нужно будет предвидеть, помещается ли слово в строку, возможно, стоит использовать моноширный шрифт и задавать ширину блока в еденицах ch.
Нужно разбить текст на сегменты по пробелам и усложнить цикл: вести счёт длине текущей строки, запрашивать следующее слово, проверять, вписывается ли оно в строку, если нет — вставлять <br> и сбрасывать длину строки, и уже после этого отдавать символы текущего слова в обработку.

Альтернативный подход — задать блоку режим разбиения на строки по переводу строки и предварительно обработать текст, вставляя переводы строк вместо пробелов перед словами, нарушаюими максимальную длину строки:

function type() {
  const text = 'В рамках спецификации современных стандартов, многие известные личности неоднозначны и будут превращены в посмешище, хотя само их существование приносит несомненную пользу обществу.'
    .replace(/(?=.{40})(.{1,40}) /gu, '$1\n');

  for (let i = 0; i < text.length; i++)
    setTimeout(function() {
      document.getElementById('container').innerHTML += text.charAt(this);
    }.bind(i), i * 30);
}

#container {
  font-family: monospace; white-space: pre; width: 40ch;
  height: 100px; padding: 25px; border: 2px solid #222; border-radius: 5px;
}

<body onload='type();'>
  <div id='container'></div>
</body>

БЛОГ НА HUSL

Автоматический перенос слов при побуквенном написания текста

Ответы (1 шт):