Tailwind CSS 水平溢出换行

Question

我的项目中有一个小 div，看起来像这样；

<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 循环的输出。

我将 AlpineJS 用于 javascript，我正在添加类似于以下的点；

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

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

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

我遇到的问题是，如果点比输出的宽度更宽，它不会换行，它只是不断走出屏幕。有没有办法在它碰到容器边缘时自动换行。见下图；

Answer 1

原版 CSS 解决方案是添加 word-wrap: break-word;

var boo = document.getElementById("boo");
function add() {
  boo.textContent += ".";
}
setInterval(add, 100)

#boo {
  width: 250px;
  border: 1px solid black;
  word-wrap: break-word;
}

<div id="boo"></div>