css - Div 侵入另一列

Question

我的评论框有一个小问题。所以评论被加载了，但有些评论真的很长，而且有一些我怀疑让评论框变得非常宽和拉伸(stretch)的字符。通常宽度很好并且可以换行，只是一些评论导致了这种情况。

<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评论区被拉伸(stretch)时的样子。

我想做的只是确保这个 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;