引导程序:文本在列表组项框之外。

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属性是为了防止溢出，应在任何两个字符之间插入分词(不包括中文/日文/韩文)。