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

我为 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>

我遇到的问题是，如果点的宽度超过了输出的宽度，它就不会换行，只会一直超出屏幕。有什么方法可以在线碰到容器边缘时自动换行。见下图；

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>

Tailwind CSS 水平溢出环绕

Tailwind CSS horizontal overflow wrapping

javascript

css

tailwind-css