#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.
вы можете попробовать
«пробел: предварительная строка»
или
«пробел: нормальный»
Комментарии:
1. не работает, я проверил и другие вещи в документе. это не так
Ответ №2:
Что именно отображается в одной строке? Я попробовал ваш код (в обычном HTML-файле с длинным абзацем) и не смог воспроизвести вашу проблему. Я заменил каждый заполнитель на длинный lorem ipsum, но разрывы строк работают правильно.
Не могли бы вы предоставить окончательный HTML-код, который отображается в браузере? Может быть, ваш текст содержит неразрывные пробелы вместо пробелов?
Однако ваш контейнер имеет ширину не менее 500 пикселей. До этого момента текст в любом случае не будет прерываться.
Редактировать: стиль для контейнера ссылается на элемент с идентификатором «контейнер». Но такого элемента не существует, поскольку «контейнер» используется просто как класс. Может быть, есть некоторые различия между приведенным выше примером и кодом, который вы фактически используете?