Flexbox 文本截断/不换行

Question

我正在使用 flexbox 来显示彼此水平的块引用和作者/头像。这是在幻灯片（flexslider）中，但这似乎不是问题的原因。

在我们点击 IE10 之前，这一切正常。它似乎在 Chrome、Firefox、Opera、Safari、Edge 和 IE11 中运行良好。

我遇到的问题是引用末尾的文本被截断了。如果您一开始没有看到这一点，您可能需要调整视口的大小。这可能是由于我在文本的每一侧都有填充，以便为自定义打开/关闭引号留出空间。

IE10 中的另一个问题是，当文本很长时（参见第一个引号中的“James Hetfield Longname”），它不会换行。这可能与我的其他问题有关，因为我猜文本也没有正确换行。

这里有一些示例链接。我已经包含了 CodePen 以及我的 HTML 模板的精简版。

代码笔：http://codepen.io/moy/pen/XdLELV 模板：http://moymadethis.com/flex/quote.html

真的希望有人可以帮助解决这个问题！

这是代码，因为它让我添加了一些东西（虽然我不认为 CSS/HTML 的这堵墙对我自己特别有帮助）！

编辑：我应该补充一点，我使用 Autoprefixer 来流行额外的 flex 前缀。

HTML：

<div class="flexslider">
    <ul class="slides">
        <li>
            <blockquote class="feature-quote">
                <p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <footer class="feature-quote__cite">
                    <img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
                    <p><strong class="name">James Hetfield Hetfield</strong> Damage Inc.</p>
                </footer>
            </blockquote>
        </li>
        <li>
            <blockquote class="feature-quote">
                <p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <footer class="feature-quote__cite">
                    <img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
                    <p><strong class="name">James Hetfield</strong> Damage Inc.</p>
                </footer>
            </blockquote>
        </li>
        <li>
            <blockquote class="feature-quote">
                <p class="feature-quote__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
                <footer class="feature-quote__cite">
                    <img src="img/temp/avatars/avatar-james.jpg" class="feature-quote__avatar" />
                    <p><strong class="name">James Hetfield</strong> Damage Inc.</p>
                </footer>
            </blockquote>
        </li>
    </ul>
</div>

CSS：

/* Base blockquote styles */

blockquote {
    margin-bottom: $baseline*2;
    overflow: hidden;   // Fixes bug when inside flexslider when open/close quote-marks duplicate.
    padding: $baseline $baseline 0 0;

    p {
        margin-bottom: $baseline/2;
    }

    > p {
        color: $blue-light;
        @include font-size(25);
        line-height: $baselineheight/1.25;
        font-weight: 300;
        padding-left: 30px;
        -webkit-font-smoothing: antialiased;

        &:before,
        &:after {
            background: url(../img/content/quote-open.png) no-repeat 0 0;
            content: "";
            display: inline-block;
            height: 24px;
            margin: 0 10px 0 -30px;
            position: relative;
            top: -5px;
            width: 21px;
        }

        &:after {
            background: url(../img/content/quote-close.png) no-repeat 0 0;
            margin: 5px 0 0 5px;
            position: absolute;
            top: auto;
        }
    }

    footer {
        padding-left: 30px;
    }

    .name {
        color: $blue;
        display: block;
        text-transform: uppercase;
    }
}


/* Feature (avatar) quotes */

.feature-quote {
    margin-bottom: $baseline;
    padding-top: 5px;
}

.feature-quote footer p {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

.feature-quote__cite {
    margin-top: $baseline;
}

.feature-quote__avatar {
    border: 5px solid $blue-lighter;
    border-radius: 100%;
    display: inline-block;
    height: 60px;
    margin-right: $baseline/2;
    width: 60px;
}


/* Above 768px (Feature quote side-by-side */

@media only screen and (min-width: 768px) {

    blockquote {
        margin: 0 25px $baseline*2;
    }

    .feature-quote {
        display: flex;
    }

    .feature-quote__text {
        order: 2;
        width: 66.66666%;
    }

    .feature-quote__cite {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 1;
        margin-top: 0;
        padding-right: 30px;
        width: 33.33333%;
    }

    .feature-quote__avatar {
        height: 80px;
        width: 80px;
    }

    .no-flexbox {

        .feature-quote {
            margin: 0 auto $baseline;
            max-width: 800px;
        }

        .feature-quote__text,
        .feature-quote__cite {
            text-align: center;
            width: 100%;
        }

        .feature-quote__cite {

            p {
                text-align: left;
            }
        }
    }
}

Answer 1

扩展 Pete 关于 IE10 未正确支持 flexbox 的评论。

http://caniuse.com/#search=flex

关于 IE10：

仅支持 2012 语法

需要 -ms- 前缀

这个答案实际上有很多关于 IE10 中 flex 的信息：https://stackoverflow.com/a/21306343/2117156

Answer 2

注意我正在使用自动前缀，所以所有 -ms- 前缀都是自动生成的。我将只注意这里的无前缀声明。

在段落中添加以下行可以达到目的flex: 0 1 auto;

我还遇到了一个问题，即文本不会在 .feature-quote__cite 容器中换行。我尝试添加上面没有用的。为了解决这个问题，我必须将flex: 0 1 auto; 直接添加到段落中而不是父容器.feature-quote__cite 上。不理想，但看起来已经成功了。

顺便说一句，在 IE11 中，当没有足够的水平空间时，头像图像会被压扁。我发现在图像中添加flex-shrink: 0; 可以解决此问题。