CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
BoJack Horseman
BoJack Horseman

Reputation: 4450

dynamic panel body in bootstrap

Hey I have following html for a comment section:

{% 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 %}

When I have text that is too long it just overflows at the moment like this.

enter image description here

How can I force line breaks when the text is too long for the comment box?

Upvotes: 0

Views: 610

Answers (2)

Anubhav pun
Anubhav pun

Reputation: 1323

use this in yours style

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

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

You can do this:

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

Upvotes: 1

Related Questions