h3 text its been overflown

Question

In the webpage there is an h3 tag with some with but the txt that contains its shown out of the h3,Itried to change the h3 max-width but the text is still shown out of the 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>

and the 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;
    }   
}

How can I set the h3 with css to adapt the text to the h3 width?

Answer 1

white-space: break-spaces;

This will allow your text to go to the next line.