Bootstrap: Text is outside list-group-item box

Question

So I'm making a movie website to practice some skills. On the front page there is a movie with some of its reviews displayed. Unfortunately when the review is too long it breaks through the box's borders instead of starting on a new line. Does anyone know how to fix this?

my template code (angular)

<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>

try `word-wrap: break-word` for your text to start in a new line — bhansa, Feb 19 '18 at 20:02

score 1 · Accepted Answer · answered Feb 19 '18 at 20:01

1

Use word-break

Set

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

break-all property is to prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).

answered Feb 19 '18 at 20:01

void

36,090
8
62
107

Brilliant! Thanks guys. – tilly Feb 19 '18 at 20:08

Bootstrap: Text is outside list-group-item box

1 Answers1