Flipster P 超出父 div答案

【问题标题】：Flipster P goes outside of parent divFlipster P 超出父 div
【发布时间】：2019-05-27 21:14:47
【问题描述】：

我正在制作一个翻转滑块，人们可以在其中对一家公司进行评论。但是文本在 div 之外流动。我尝试了很多东西，但我无法让它像我想要的那样工作。这就是我所拥有的：

https://imgur.com/dfLlUSg

这就是我想要的：

https://imgur.com/f61MFCf

我正在使用高级自定义字段重复器字段。

另外，两行文字（图片上方）没有任何空格，我不知道为什么。

这是它的构建方式：

https://imgur.com/MX49WWB

谁能帮我解决这个问题？

这是一些额外的 SCSS：

.flipster {
    //margin-top: 75px;
    ul {
        height: 483px !important;
        margin-top: 5px;
        .flipster__item--current article {
            box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.2);
        }
        li {
            &.flipster__item--future {
                .flipster__item__content {
                    //transform: rotate(0) !important;
                }
            }

            &.flipster__item--past {
                .flipster__item__content {
                    //transform: rotate(0) !important;
                }
            }


            article,
            .flipster article {
                padding: 45px;
                width: 460px;
                margin: 10px auto;
                height: 460px;
                background: #fff;
                box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, .1);

                .quote {
                    text-align: center;
                    p {
                        font-size: 32px;
                        text-align: center;
                    }
                }
                .quote-persoon {
                    p {
                        font-size: 18px;
                        color: $oranje;
                        text-align: center;
                        padding: 35px 0 5px 0;
                        display: block;
                    }
                    span {
                        font-size: 16px;
                        width: 100%;
                        display: block;
                        text-align: center;
                    }
                    img {
                        margin: 35px auto 0 auto;
                        display: block;
                        border-radius: 75px;
                    }
                }
            }
        }
    }
    .flipster__button {
        opacity: 1;
        svg {
            color: $oranje;
        }
    }
}

当我重新加载页面时，我可以看到所有内容都在 div 中，但它很快就会跳出来

【问题讨论】：

您能否创建一个重现您的问题的 sn-p。

标签： php html advanced-custom-fields jquery-flipster

【解决方案1】：

我发现了问题。它在 ul.flipster__container 中。有一条 css 行： white-space: nowrap; 不知道为什么会有任何用处

【讨论】：