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;