html - 水平图像滚动，里面的文字太过分了

Question

我的 div 中的文本从我的图像水平滚动到下一个图像。我想要每个图像中的每个文本，但我正在尝试所有方法，但没有任何效果!

Answer 1

重叠文本是由 .list-inline 选择器上的 white-space: nowrap; 引起的。所以让我们添加 white-space: normal; 到 .DocumentList p 选择器来解决这个问题。

这是完整更新的 CSS:

.factorSection{
    display:none;   
}

#section2-05{
    padding-right:0;
    padding-left: 10px;
    padding-bottom:0;
}

#section2-05 h2{
    color: #424242;
    font-weight:900;
    font-size: 1.7em;
    line-height: 1.2em;
    margin-bottom: 0;
}

#section2-05 .col-lg-12 p{
    font-size: 1.2em;
    line-height: 1.4em;
    margin-bottom:1em;
}

.section2-05_phone{
    display:block;
    overflow-x: scroll;
    width: auto;
    white-space: nowrap;
}

.documentList{
    overflow-x:scroll;
    overflow-y:hidden;
    height:200px;
    width:100%;
    padding: 0 15px;
}

.factorImgText{
    position:absolute;
    z-index: 1;
    padding: 0 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    text-align: center;
    width:90%;
}

.factorImg1, .factorImg2, .factorImg3, .factorImg4{
    position: relative;
    display: inline-block;
    margin: 8px 8px;
    box-shadow: 2px 2px 4px #bbb;
    border-top-right-radius: 4px;
    width: 320px;
    height: 100%;
    vertical-align: bottom;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    height:370px;
}

.factorImg1{
    background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
    margin-right:3px;
}
.factorImg2{
    background-image: url('https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6');
    margin-right:3px;
}
.factorImg3{
    background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
    margin-right:3px;
}
.factorImg4{
    background-image: url("https://images.unsplash.com/photo-1504151046121-7fed23ebed42?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=57b654bb2ec29b612049176a9abd8cd6");
    margin-right:3px;
}

.list-inline {
  white-space:nowrap;
}

.DocumentList h6, .DocumentList p{
    color:#fff;
    font-weight:900;
}

.DocumentList h6{
    font-size: 1em;
    text-align: center;
    width: 100%; /* Changed from 90% --> 100% to help center. */
    margin: 0; /* Added to help center. */
}

.DocumentList p{
    font-size: .75em;
    line-height: 1.4em;
    margin-bottom: 0;
    white-space: normal; /* Add to fix the overlapping text. */
}

<div class="row row-fluid section2-05_phone">
            <div class="DocumentList col-lg-12">
                <ul class="list-inline">
                    <li class="factorImg1">
                        <div class="factorImgText">
                            <h6>2 DÍAS ANTES… ¡ZURPRAIS!</h6>
                            <p>Con tu pack de experiencias, tu edad y tu perfil (familias, parejas, amig@s…), organizaremos tu plan… Y como es Zurprais, 2 días antes sabrás lo que es.</p>
                        </div>
                        <div class="overlay1"></div>
                    </li>
                    <li class="factorImg2">
                        <div class="factorImgText">
                            <h6>PLANES CON UN PLUS</h6>
                            <p>Un atardecer en velero… ¿con cava y ostras? Un brunch… ¿entre viñedos? Todas tus experiencias tendrán un toque extra que las hará aún más especiales.</p>
                        </div>
                        <div class="overlay2"></div>
                    </li>
                    <li class="factorImg3">
                        <div class="factorImgText">
                            <h6>EMOCIÓN DESDE LA RESERVA</h6>
                            <p>Al reservar, empieza el juego. Recibirás algunas pistas sobre las actividades que te podrían tocar. Para que vayas calentando motores.</p>               
                        </div>
                        <div class="overlay3"></div>
                    </li>
                    <li class="factorImg4">
                        <div class="factorImgText">
                            <h6>CAMBIO GRATUITO</h6>
                            <p>¡Segurísimo que tu plan te va a encantar! Pero para que estés tranquil@: si no te gusta lo que te hemos organizado, te preparamos uno diferente para otro día.</p>               
                        </div>
                        <div class="overlay4"></div>
                    </li>
                </ul>
            </div>
        </div>