Laravel 9论坛项目：问题内容溢出容器的排查与解决

问题原因 #

当输入无换行、无空格分隔的长文本时，浏览器默认仅在空格、换行符或特定分隔符处自动换行，这类连续无分隔的超长内容无法触发自动换行，从而撑破容器边界，导致溢出。

解决方法 #

1. CSS样式修复（推荐方案） #

给文本容器添加CSS属性，强制文本在容器内换行：

.topic__text p {
    /* 适合非空格分隔的语言（如波斯语），允许在任意字符处换行 */
    word-break: break-all;
    /* 若以英文为主，优先在单词边界换行，无法换行时再拆分单词 */
    /* overflow-wrap: break-word; */
}

2. Laravel后端处理（兼顾换行格式） #

如果需要保留用户输入的换行格式，同时处理长文本溢出，可以结合Laravel的辅助函数：

<div class="topic__text BYekan">
    <p>
        {!! nl2br(e($question->que_body)) !!}
    </p>
</div>

• e()：转义HTML特殊字符，避免XSS攻击；
• nl2br()：将文本中的换行符\n转换为<br>标签，保留输入时的换行格式；
• 使用{!! !!}输出，因为{{ }}会自动转义HTML标签，导致<br>无法生效。

内容的提问来源于stack exchange，提问作者Pouya Vaghefi