我有一個網站，其中將顯示大量文本，當它處于正常螢屏大小時，它作業正常，但是當我將瀏覽器縮小到移動大小時，文本會轉義 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 !!}
uj5u.com熱心網友回復：
嘗試洗掉w-fullcss 類。w-full將寬度設定為父級的 100%，結合ml-5 ml-8類，將超過父級的大小。
像這樣：https : //jsfiddle.net/o93udj4v/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/367927.html