移动端屏幕下文本溢出div问题：Tailwind CSS Blade页面故障求解

文本溢出核心原因 #

1. Flex布局下子元素默认min-width: auto，内容过长时会撑破父容器宽度限制，你添加的break-words无法正常生效
2. 连续无空格的长文本（比如长链接、长英文单词）仅靠break-words无法强制换行
3. 富文本渲染的内容可能自带不换行样式（比如<pre>标签默认white-space: pre规则）

具体修改方案 #

步骤1：修正内容容器的类 #

找到存放{!! $post->Beschreibung !!}的div，调整类如下：

<div class="flex-grow ml-8 mb-5 content w-full md:w-3/4 pr-4 text-lg text-justify tracking-widest leading-loose mr-7 subpixel-antialiased break-all overflow-x-hidden whitespace-normal">
    {!! $post->Beschreibung !!}
</div>

说明：

• 删除重复的ml-5冗余属性
• 替换break-words为break-all，强制对连续长文本换行
• 新增overflow-x-hidden隐藏横向溢出内容，whitespace-normal强制遵循正常换行规则，覆盖富文本可能自带的不换行属性

步骤2：给所有Flex子容器加min-w-0 #

Flex布局下给所有父级容器添加min-w-0，允许容器被内容压缩到小于内容宽度，避免撑破布局：

• 外层w-11/12的灰色背景div：新增min-w-0
• 绿蓝渐变背景的div：新增min-w-0，同时删掉多余的text-4xl font-bold属性（子元素已经覆盖该字体配置）
• 内层bg-gray-100的div：新增min-w-0
• 包裹内容字段的flex-grow div：新增min-w-0

修改后的完整代码示例：

<div class="flex justify-center">
    <!-- 新增min-w-0 -->
    <div class="w-11/12 bg-gray-400 p-6 rounded-lg font-serif bg-opacity-70 subpixel-antialiased tracking-wide not-italic min-w-0">
        <!-- 新增min-w-0，删除冗余字体属性 -->
        <div class="p-10 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg min-w-0">
            <!-- 新增min-w-0 -->
            <div class="bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg min-w-0">

                <h1 class="pt-2 pl-4 text-4xl font-bold text-gray-900 title-font mb-8 underline">
                    {{ $post->Titel }}
                </h1>

                <!-- 新增min-w-0 -->
                <div class="flex-grow min-w-0">
                    <div>
                        <div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif"> Standort: {{ $post->Standort }}</div>
                        <div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif"> Kontakt: {{ $post->Kontakt }}</div>
                        <div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif"> Startdatum: {{ $post->startdate }}</div>
                        <div class="pt-2 pl-4 pb-3 ml-8 font-medium text-base font-bold font-serif mb-8"> Enddatum: {{ $post->enddate }}</div>
                        <!-- 修正后的内容容器 -->
                        <div class="flex-grow ml-8 mb-5 content w-full md:w-3/4 pr-4 text-lg text-justify tracking-widest leading-loose mr-7 subpixel-antialiased break-all overflow-x-hidden whitespace-normal">
                            {!! $post->Beschreibung !!}
                        </div>
                    </div>
                </div>
                <div class="flex justify-start font-medium text-base font-bold font-serif mb-5 ml-8">
                    <button type="submit" class="text-white px-4 py-3 rounded text-base font-medium
                                bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
                                duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100">Direkt bewerben!</button>
                </div>
            </div>
        </div>
    </div>
</div>

步骤3：适配富文本中的代码块（可选） #

如果你的富文本内容包含<pre>代码块，在项目全局CSS中添加以下规则，避免代码块溢出：

.content pre {
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

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