Javascript 顺风CSS水平溢流缠绕

我在我的项目中有一个小部门，看起来是这样的

<div class="mb-4">
    <div x-cloak x-show="output.length" class="relative bg-gray-800 text-gray-200 rounded p-4 text-xs">
        <pre x-html="output"></pre>
    </div>
</div>

一点javascript就可以添加一个。到每个foreach循环上的输出

我在javascript中使用AlpineJS，我添加了与下面类似的点

<script>
    window.getApp = function() {
        return {
            output: '',

            echo(string) {
                this.output += string + '<br>';
            },
            loadApp() {
                var i;

                for (i = 0; i < 50000; i++) {
                    this.echo('.');
                }
            }
        }
    }
</script>

window.getApp=函数（）{
返回{
输出：“”，
回声（字符串）{
this.output+=string+'
'；
},
loadApp（）{
var i；
对于（i=0；i<50000；i++）{
这个.echo（'.'）；
}
}
}
}

我遇到的问题是，如果点的宽度超过了输出的宽度，它就不会卷起，而是继续离开屏幕。有没有办法在线条碰到容器边缘时自动将其包裹起来。见下图

---

常规CSS解决方案是添加

单词包装：打断单词


var boo=document.getElementById（“boo”）；
函数add（）{
boo.textContent+=”；
}
设置间隔（添加，100）
#boo{
宽度：250px；
边框：1px纯黑；
单词包装：打断单词；
}
您介意分享可重新创建的代码以查看吗？出于某种原因，这似乎对我不起作用。实际上。。。我写错了。。。这确实有效。非常感谢你！