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;