Divが別の列に侵入する

Question

私が作成したコメントボックスには少し問題があります。 コメントは読み込まれますが、コメントの一部は実際には長く、いくつかの文字があり、コメントボックスが非常に広くて伸びていると思われます。通常、幅は問題なく、ラッピングは機能しますが、これはいくつかのコメントによって発生します。ここで

<div class="comments-group list-group"> 
    <a href="#" class="list-group-item active"> 
     <h4 class="list-group-item-heading"> 
     Top Comments 
     </h4> 
    </a> 
    <span *ngFor="let item of getCurrentMediaList();let i = index "> 
     <span *ngIf="i === currentIndex"> 
     <a class="list-group-item" *ngFor="let comment of item.comments;let x = index "> 

      <span> 
      <p> 
       {{ comment }} 
      </p> 
      </span>  
     </a> 
     </span> 
    </span> 
    </div> 
</div> 

は、コメント領域が引き伸ばされたときにどのように見えるかのsmall screenshotです。

私がしようとしているのは、その中のコンテンツが超えても、このdivが列を超えないようにすることです。

ありがとうございます！

Answer 1

だから私はそれに合わせて、コメント周りのdivに次を追加しました：

overflow-wrap: break-word; 
word-wrap: break-word; 
-ms-word-break: break-all; 
/* This is the dangerous one in WebKit, as it breaks things wherever */ 
word-break: break-all; 
/* Instead use this non-standard one: */ 
word-break: break-word; 

/* Adds a hyphen where the word breaks, if supported (No Blink) */ 
-ms-hyphens: auto; 
-moz-hyphens: auto; 
-webkit-hyphens: auto; 
hyphens: auto;