I'm currently working on a project within the Bootstrap 3 framework and struggling with an issue regarding text overflow in extra small view. The text is not behaving as expected, as it should stick to its container and break accordingly. I've experimented with various CSS properties like word-wrap, word-break, and text-wrap, but none seem to resolve the problem.
This is how the current layout appears:
This is the snippet of code causing the issue:
<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">
/ 30 likes
• 30 dislikes
/ 30 days ago
</span>
</span>
<span class="pipe-hide"> | </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>
Additionally, here's the definition of the .break class being used:
.break {
word-wrap: break-word !important;
word-break: break-all !important;
text-wrap: suppress !important;
}
Despite including these styles, my text is still not breaking correctly within Bootstrap. Does anyone know what might be causing this issue?