Um sicher zu gehen, habe ich das mit der Textarea mal untersucht und konnte bei den automatischen Umbrüchen keine Steuerzeichen finden.
Darauf hin habe ich eine Demo mit dem Verfahren gemacht, das ich beschrieben habe. Ist nicht besonders kompliziert und scheint gut zu funktionieren:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Automatic Wrapping</title>
<style>
#text-container,
#help-container {
display: inline-block;
border: 2px solid lightblue;
min-height: 1em;
}
#text-container {
width: 200px;
}
#help-container {
min-width: 200px;
}
</style>
</head>
<body>
<div id="text-container" contenteditable="true"></div>
<div id="help-container"></div>
<textarea id="help-textarea"></textarea>
<script>
const container = document.getElementById('text-container');
const helpcontainer = document.getElementById('help-container');
const textarea = document.getElementById('help-textarea');
const maxWidth = 200;
container.addEventListener('keyup', (event) => {
let text = container.innerHTML;
console.log(text);
helptext = '';
for (let i = 0; i < text.length; i++) {
helptext += text.charAt(i);
helpcontainer.innerHTML = helptext;
let currentWidth = helpcontainer.clientWidth;
if (currentWidth > maxWidth) {
helptext = helptext.replace(/\s([^\s]+)$/, '<br>$1');
}
}
textarea.value = helptext;
});
</script>
</body>
</html>