html - h3 文本已溢出

Question

在网页中有一个 h3标签有一些，但包含它的txt显示在h3之外，尝试更改h3 max-width但是文本仍然显示在h3之外

<section class="link-interview-section">
        <div class="custom-mobile-row">
            <div class="half-row" id="div1">
                <h3>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </h3>
                <h4>
                    Lorem Ipsum
                </h4>
                <div class="btn-link btn-white">
                    <a href="<% url(t('meta.bbbb_simval_url')) %>">
                        <span class="btn-link-text">Lorem Ipsum</span>
                        <span class="arrow-right"></span>
                    </a>
                </div>
            </div>
            <div class="half-row" id="div2">
                <h3>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </h3>
                <h4>
                    Lorem Ipsum
                </h4>
                <div class="btn-link btn-white">
                    <a href="<% url(t('meta.aaa_url')) %>">
                        <span class="btn-link-text">Lorem Ipsum</span>
                        <span class="arrow-right"></span>
                    </a>
                </div>
            </div>
        </div>
    </section>

和 css(sass)

.link-interview-section{
    .custom-mobile-row{
        width: 100%;
        /*para no dejar un espacio entre los div*/
        font-size: 0px;
    }
    .half-row{
        width: 50%;
        display: inline-block;
        height: 500px;
        background-size: cover;
        background-position: center;
        vertical-align: top;
        margin:0;
        font-size: 15px;
        font-family: Gelasio, serif;
        color:#FFFFFF !important;
        margin-bottom: 30px;
        font-size: 15px;
        line-height: 1.2;
    }
    @media (max-width: 768px) {
        .half-row {
            width: 100%;
        }
    }
    @media (min-width: 768px) {
        .custom-mobile-row{
            white-space: nowrap;
        }
    }
    #div1{
        background-image: url('#{$gImagesPath}g6-1-desktop.jpg');
        @include breakpoint(medium down){
            background-image: url('#{$gImagesPath}g6-1-mobile.jpg');
        }
    }
    #div2{
        background-image:  url('#{$gImagesPath}gs6-2-desktop.jpg');
        @include breakpoint(medium down){
            background-image: url('#{$ImagesPath}g.jpg');
        }
    }
    body{
        margin: 0;
    }   
}

如何使用 css 设置 h3 以使文本适应 h3 宽度？

Answer 1

white-space: break-spaces;

这将允许您的文本转到下一行。