javascript - 如何让这个 Slick.js 元素中的文本不超过它的容器？

Question

我正在使用 slick.js制作 slider 。为了让我的文本 div 与我的媒体 div 对齐，我添加了选项 :variableWidth:true, 到文本 div。 使用此选项，媒体 div 和文本 div 会响应地相互增长和收缩。但是，将可变宽度选项设置为 true - 内的文本开始超出其容器。

jsfidlle with incorrect behavior

jsfiddle with correctish behavoir

未设置 variablewidth 的正确外观: 我希望 slider 看起来像上面那样，但文本也没有整齐地换行。

variablewidth 设置为 true 时不正确: 上图:文本刚好离开页面，接下来的文本幻灯片做同样的事情，但它们延伸到页面之外 - 使蓝色框(包含 div)看起来是空的。

我的代码:

$(document).ready(function () {
            $('.text-slides').slick({
              variableWidth:true,
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: true,
                centerMode: true,
                asNavFor: '.slider-nav',

            });
            $('.slider-nav').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                asNavFor: '.text-slides',
                dots: true,
                centerMode: true,
                focusOnSelect: true,
                autoplay: true,
                mobileFirst:true
            });
        });

.slider-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.slider-media {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 60%;
}

.slider-text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #2c3e50;
    width: 40%;
}

.slider-media > .slick-slider {
    margin-bottom: 0;
}

.carousel-images > .slick-list {
    padding: 0 !important;
}

.carousel-images > .slick-list > .slick-slide {
    width: 350px !important;
}

.carousel-images > .slick-prev {
    left: 10px;
}

.carousel-images > .slick-next {
    right: 10px;
}

.carousel-images > .slick-dots {
    bottom: -10px;
}

.carousel-images > .slick-dots > li button:before {
    font-size: 12px;
}

.carousel-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    padding: 20px;
    word-break: break-all;

}

.carousel-text .title {
    color: #bdc3c7;
    font-size: 1.05em;
    font-weight: 300;
    text-transform: uppercase;
}

.carousel-text .headline {
    color: #fff;
    text-align: justify;
}

<div class="slider-container">
                            <div class="slider-media">
                                <div class="carousel-images slider-nav">
                                    <div>
                                        <img src="img/animals" alt="1">
                                    </div>
                                    <div>
                                        <img src="img/cats" alt="2">
                                    </div>
                                    <div>
                                        <img src="img/nature" alt="3">
                                    </div>
                                </div>
                            </div>
                            <!-- /.block-media -->

                            <div id="text-slider" class="slider-text">
                                <div class="carousel-text text-slides">
                                    <div><span class="title">Sed ut perspiciatis unde omnis iste natus error</span>

                                        <p class="headline">
                                            Sit voluptatem accusantium doloremque laudantium,
                                            totam rem aperiam, eaque ipsa quae ab illo inventore
                                            veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                        </p>
                                    </div>

                                    <div><span class="title"> Nemo enim ipsam </span>

                                        <p class="headline">
                                            Quia voluptas sit aspernatur aut odit aut fugit,
                                            sed quia consequuntur magni dolores eos qui
                                            ratione voluptatem sequi nesciunt.
                                        </p>
                                    </div>

                                    <div><span class="title">Non provident, similique sunt in culpa</span>

                                        <p class="headline">
                                            Officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
                                            rerum facilis
                                            est et expedita distinctio.
                                        </p>
                                    </div>

                                </div>
                            </div>

谁能帮我找到一种方法来防止文本溢出并让它在单词之间换行而不是在单词中间？

Answer 1

尝试执行以下操作:

在你的 CSS 中: 删除 分词:break-all； 写在 carousel-text 类中，而不是写:

.carousel-text
{ 
 word-wrap:normal;
}

此外，不要忘记提及以下内容:

.carousel-text
{
 width:40%; //Set according to your need.
}
.carousel-text .headline
{
 width:100%; //Set according to your need.
 display:inline-block; //restricts content from going out of parent div's size. 
}