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

所以我在评论中添加了以下内容以适应它：

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;

Div侵入另一列

1 个答案: