首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >移动屏幕大小上的文本转义div

移动屏幕大小上的文本转义div
EN

Stack Overflow用户
提问于 2021-11-26 22:47:40
回答 1查看 80关注 0票数 1

我在一个站点上将显示大量文本,当它处于正常屏幕大小时,它可以正常工作,但是当我将浏览器缩小到移动大小时,文本就会脱离div,如下所示:

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

这是刀片文件:

代码语言:javascript
运行
复制
<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 !!}

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-26 23:05:41

尝试删除w-full css类。w-full将宽度设置为父类的100%,这与ml-5 ml-8类组合在一起,将超过父类的大小。

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70130707

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档