Question

我制作了一个django文件，并在html中向用户显示了一些信息，但是整段信息都打印在一行上，我试图在它们周围放置一个div，但这没有帮助。我希望将信息显示为普通文章，而不是将全部内容显示在一行上。我认为这可能与某个div的大小有关，但我无法指出确切的问题是什么。 ps我试图缩短代码的长度，这就是它如此不整洁的原因。

{% block content %}
<div class="container" >
<div class="pl-5 ">
  <article class="media content-section">
    <div>
      <div>
        <div id="parent" >
          <div class="">
            <br>
            <img class="rounded-circle article-img" height="75" width="75" src="{{ post.author.profile.image.url }}">
          </div>
             <div>
              <div class="container">
                <a  class="mr-2 text-secondary" href="{% url 'user-posts' post.author.username %}"> <h4>{{ post.author }}</h4></a>
                <small class="text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
              </div>
               <div class="container">
              {%if post.author == request.user%}
              &nbsp <a  href="{% url 'post-delete' post.id %}"> <i title="Delete Post" class="far fa-trash-alt"></i></a> &nbsp |  <a  href="{% url 'post-update' post.id %}">edit</a>
              {% endif %}
               </div>
           </div>
      </div>   
            <div class="ml-3 ">
              <div class="container">
            <h3>{{ post.title }}</h3>
            <p class="article-content">{{ post.content }}</p>
            {% load static %}
            {% if post.image %}
            <div class="container">
            <img id="media" style="max-width:95%;height:auto;" class="" src="{{ post.image.url }}" >
            <div>
              <div>
            <a href="{{ post.image.url }}"><button class="btn mt-2 mb-2"><i class="fas fa-search-plus"></i>

</button></a></div>  
            </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </article>
</div>
</div>




<style type="text/css">

.deletebutton {
  font-size: small;
  color: hotpink;

 }
 #viewallcomments{
  font-size: medium;
 }
 #container {
    width: 500px;
}
#first {
    width: 50px;
    float: left;
}
#second {
    width: 50px;
    float: left;
}
#third{
  width: 50px;
  float: right;
  margin-right: 25%;
}
#clear {
    clear: both;
}
 #reportcontainer {
    width: 100%;
}
#reportfirst {
    width: 250px;
    float: left;
}
#reportsecond {
    width: 50px;
    float: left;
}

</style>
</div>













































{% endblock %}

Answer 1

在包含的div上使用CSS样式“空白”。

您可以尝试

“空白：前行”

或

“空白：正常”

https://www.w3schools.com/cssref/pr_text_white-space.asp

Answer 2

单行显示的内容是什么？我尝试了您的代码（在带有长段的纯HTML文件中），但无法重现您的问题。我用一个长lorem ipsum替换了每个占位符，但是换行符正常工作。

您能否提供在浏览器中呈现的最终HTML？也许您的文本包含不间断空格而不是空格？

但是，您的容器的宽度至少为500px。在此之前，文本在任何情况下都不会中断。

编辑：容器的样式引用ID为“容器”的元素。但是这样的元素不存在，因为“容器”仅用作类。上面的示例与您实际使用的代码之间可能存在一些差异吗？

全部信息打印在一行上

2 个答案: