Bootstrap：文本在列表组项目框之外[重复]

Question

所以我正在制作一个电影网站来练习一些技巧。在首页上有一部电影，其中显示了一些评论。不幸的是，当评论太长时，它会突破框的边界，而不是从新行开始。有谁知道如何解决这个问题？

我的模板代码（角度）

<div class="container">
<div class="container col-md-12">
    <h3>Cinema</h3>
    <hr>
    <div class="col col-md-5">
        <img [src]="movie?.pictureUrl" class="img-responsive" alt="hello">
    </div>
    <div class="col col-md-7 ">
        <a [routerLink]="['movies', movie?._id]"><h1>{{movie?.title}} ({{movie?.year}})</h1></a>
        <span class="glyphicon glyphicon-star"></span><span><h1 class="averageRating">{{movie?.averageRating}}</h1></span><br>
        <ul class="list-group">
            <li class="list-group-item review" *ngFor="let review of movie?.reviews">
                <p class="review-content">{{review.user.firstName}} {{review.user.lastName}} <b>|</b> {{review.content}}</p>
            </li>
        </ul>
    </div>
</div>
    <div class="container col-md-8 col-md-offset-2">
        <hr>
    </div>
</div>

Answer 1

使用word-break

设置

.class{
   word-break: break-all;
}

break-all属性是为了防止溢出，任何两个字符之间都要插入分词（不包括中文/日文/韩文）。