css - 文本从容器中出来 - 应该是响应式的

Question

我正在使用 Bootstrap 3 开发一个元素，我在超小 View 中遇到了一些文本问题。文本基本上是从它的容器中流出的，但它应该相应地粘住和断开。我试过使用不同的 CSS 属性来打断文本，例如 word-wrap、word-break、text-wrap。这些都不起作用。

它是这样的:

代码是这样的:

<div class="comments-area row">
    <div class="user-info col-lg-2 col-md-2 col-sm-2 right">
        <img src="{{ S_AVATAR_PATH }}" height="75px" alt="Avatar" class="comment-avatar valign-top img-circle cream-thick-border" />
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1" style="width: 2%;"></div>
    <div class="comment-rag col-lg-9 col-md-9 col-sm-9 left" style="padding: 0;">
        <div class="comment-content">
            <span class="small">
                Posted by <strong>Username</strong>
                <span class="grey">
                    &nbsp;/&nbsp;30 likes
                    &nbsp;&bull;&nbsp;30 dislikes
                    &nbsp;/&nbsp;30 days ago
                </span>
            </span>
            <span class="pipe-hide">&nbsp;|&nbsp;</span>
            <span class="comment-options">
                <span class="comment-option glyphicon glyphicon-thumbs-up"></span>
                <span class="comment-option glyphicon glyphicon-thumbs-down"></span>
                <span class="comment-option glyphicon glyphicon-minus-sign"></span>
            </span>
            <br />

            <span class="break">Lorem ipsum dolor sit amet, fastidii dissentiunt et pro, pri eu rebum omnes nusquam, has et iudico facilis forensibus. In wisi facete deterruisset has. Eirmod option officiis vis ad, mea no dicta ornatus scriptorem, vim te primis option. Stet invenire vis te. Per at omnis commodo, quot debet recteque duo id. Ius aeterno ponderum platonem an. Reque deleniti ei cum. Ut probo liberavisse pri, graeci saperecommodo, quot debet recteque duo id. Ius aeterno ponderum platonem an. Reque deleniti ei cum.</span>
        </div>
    </div>
</div>

这是小的 .break 类:

.break {
    word-wrap: break-word !important;
    word-break: break-all !important;
    text-wrap: suppress !important;
}

为什么 Bootstrap 不能正确地分解我的文本？怎么了？

Answer 1

comment-content 的 CSS 是什么？

当我尝试使用 comment-content 类的固定宽度时，一切都很好。

这是一个 example .