引导程序中的动态面板主体

Question

嘿，我有以下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">
              {{ comment.content }}
            </div>
          </div>
        </div>
      </div>
    </div>
{% endfor %}

当我的文字太长时，它就会像这样溢出。

如果评论框的文字太长，我该如何强行换行？

Answer 1

你可以这样做：

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

在你的风格中使用它

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