移动屏幕尺寸上的文本转义 div答案

【问题标题】：Text escaping div on mobile screen size移动屏幕尺寸上的文本转义 div
【发布时间】：2022-01-04 21:16:54
【问题描述】：

我有一个网站会显示大量文本，当它处于正常屏幕尺寸时它工作正常，但是当我将浏览器缩小到移动尺寸时，文本会转义 div，如下所示：

https://i.stack.imgur.com/LMPH7.png

这是刀片文件：

<div class="flex justify-center ">
    <div class="w-11/12 bg-gray-400 p-6 rounded-lg font-serif text-4xl font-bold bg-opacity-70 subpixel-antialiased tracking-wide not-italic">
        <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">
            <div class="bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">

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

                <div class="flex-grow">
                    <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-5 ml-8 break-words mb-5 content w-full md:w-3/4 pr-4 text-lg text-justify tracking-widest leading-loose mr-7 subpixel-antialiased">
                            {!! $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>

我尝试使用中断词和全部中断。以及尝试添加填充或边距..但我对 css 相当陌生，我认为这不是正确的方法。

带有文本的div是带有{!! $post->beschreibung !!}的div

【问题讨论】：

请使用重现问题所需的最短代码创建minimal reproducible example。
你的标题中有<meta name="viewport" content="width=device-width, initial-scale=1.0" />标签吗？
嘿@miken32！ :D 我不认为它是可重现的，因为它已链接到数据库：/ 我可以将输入的文本粘贴到此处，这有帮助吗？
@GillesBraun 是的！
这是一个 HTML 问题，因此服务器端代码不相关。查看源代码并复制有问题的 HTML。您可以使用 sn-p 功能在您的问题中实时显示 HTML。

标签： html css twitter-bootstrap

【解决方案1】：

尝试删除 w-full css 类。 w-full 将宽度设置为父级的 100%，与 ml-5 ml-8 类结合，将超过父级的大小。

像这样：https://jsfiddle.net/o93udj4v/

【讨论】：