Question

我正在研究Bootstrap 3中的一个项目，我在一个额外的小视图中遇到了一些问题。文本基本上是从容器中流出来的，但它意味着相应地粘住和断开。我尝试使用不同的CSS属性来破解文本，例如word-wrap，word-break，text-wrap。这些都没有奏效。

这就是它的样子：

Problem

这就是代码的样子：

<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。

文本走出容器 - 假设是响应

1 个答案: