corps de panneau dynamique bootstrap

Question

Hey je suit html pour une section de commentaire:

{% for comment in comments %} 
    <br> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-sm-5"> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <strong>{{ comment.author.username }}</strong> 
       <div class="text-muted">commented on: {{ comment.created|date:"Y/m/d" }}</div> 
      </div> 
      <div class="panel-body"> 
       {{ comment.content }} 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
{% endfor %} 

Quand j'ai texte est trop long, il déborde juste au moment comme celui-ci.

Comment puis-je forcer les sauts de ligne lorsque le texte est trop long pour la boîte de commentaires?

Answer 1

Vous pouvez le faire:

CSS

.break-word { 
word-wrap: break-word; 
} 

HTML

{% for comment in comments %} 
    <br> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-sm-5"> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <strong>{{ comment.author.username }}</strong> 
       <div class="text-muted">commented on: {{ comment.created|date:"Y/m/d" }}</div> 
      </div> 
      <div class="panel-body"> 
       <p class="break-word">{{ comment.content }}</p> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
{% endfor %} 

DEMO HERE

Answer 2

utiliser dans le style de la vôtre

.panel-body 
{ 
word-break: break-all; 
}