вся информация, напечатанная в одной строке

#html

#HTML

Вопрос:

Я создал файл 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%}
              amp;nbsp <a  href="{% url 'post-delete' post.id %}"> <i title="Delete Post" class="far fa-trash-alt"></i></a> amp;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 %}


  

Ответ №1:

используйте css attibute «пробел» в содержащем div.

вы можете попробовать

«пробел: предварительная строка»

или

«пробел: нормальный»

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

Комментарии:

1. не работает, я проверил и другие вещи в документе. это не так

Ответ №2:

Что именно отображается в одной строке? Я попробовал ваш код (в обычном HTML-файле с длинным абзацем) и не смог воспроизвести вашу проблему. Я заменил каждый заполнитель на длинный lorem ipsum, но разрывы строк работают правильно.

Не могли бы вы предоставить окончательный HTML-код, который отображается в браузере? Может быть, ваш текст содержит неразрывные пробелы вместо пробелов?

Однако ваш контейнер имеет ширину не менее 500 пикселей. До этого момента текст в любом случае не будет прерываться.

Редактировать: стиль для контейнера ссылается на элемент с идентификатором «контейнер». Но такого элемента не существует, поскольку «контейнер» используется просто как класс. Может быть, есть некоторые различия между приведенным выше примером и кодом, который вы фактически используете?