從容器中走出的文本 - 應該是響應式的

Question

我正在Bootstrap 3中處理一個項目，並且在特小視圖中出現了一些小問題。文本基本上從它的容器中流出，但它的意思是堅持並相應地打破。我試過用不同的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。