Bootstrap：Text在list-group-item框之外

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

设置

private ListView createPage(int pageIndex) {
    //etc
    listView.setItems(FXCollections.observableArrayList(repoArray));

    return listView;
}

.class{ word-break: break-all; } 属性是为了防止溢出，应在任意两个字符之间插入分词（不包括中文/日文/韩文文本）。