Как сдеалть перенос текста в HTML
Есть сайт на котором расположены посты:
это делает код CSS и HTML (сайт на Django)
div.container9 {
height: 15em;
display: flex;
align-items: center;
justify-content: center }
div.container6 {
height: auto;
display: flex;
align-items: center;
justify-content: center }
div.container6 p {
margin: 0 }
div.container7 {
height: 10em;
display: flex;
align-items: left;
justify-content: left }
div.container7 p {
margin: 0 }
article img{
max-width: 100% !important;
height: auto !important;
border-radius: .25rem!important;
}
.featured-image-list{
object-fit: cover;
}
figure.percent_size {
width: 70%; /* Ширина */
max-width: 5000px;
float: left; /* Выстраиваем элементы по горизонтали */
border-radius: 5px; /* Радиус скругления */
padding: 2%; /* Поля */
}
div.padding_three_percents_left {
padding-left: 3%;
}
div.padding_two_percents_left {
padding-left: 2%;
}
div.padding_one_percents_left {
padding-left: 1%;
}
/*Отступ для списка всех постов и новостей*/
.padding_for_name_left {
padding-left: 7%;
}
div.padding_eight_percents_bottom {
padding-bottom: 6%;
}
.img_wrap {
width: 480px;
height: 270px;
border-style: solid;
}
.img_wrap img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 0 0;
}
div.container_test {
height: 10em;
align-items: center;
justify-content: center }
IMG.displayed-center {
display: block;
margin-left: auto;
margin-right: auto }
.layer {
overflow: hidden;
width: 480px; /* Ширина блока */
height: 270px; /* Высота блока */ /* Поля вокруг текста */ /* Параметры рамки */
}
.container_multi {
height: auto;
display: flex;
align-items: center;
justify-content: center }
{% for post in posts %}
<div class="col-sm-6 sm-margin-b-50">
<div class="margin-b-20">
<div class="container6">
<div class="work wow zoomIn" data-wow-duration=".3" data-wow-delay=".1s">
<div class="work-overlay layer">
<p><a href="{{ post.get_absolute_url }}"><img class="img-responsive img_wrap displayed-center" alt="{{ post.title }}" src="{{ post.image.url }}"></a></p>
</div>
</div>
</div>
</div>
<div>
<h4 class="padding_for_name_left"><a href="{{ post.get_absolute_url }}">{{ post.title|truncatechars:40 }}</a></h4>
<p class="padding_for_name_left" href="{{ post.get_absolute_url }}">{{ post.body|safe|striptags|truncatechars:62 }}</p>
<h6 class="padding_for_name_left" href="{{ post.get_absolute_url }}">Published {{ post.publish.date }} by <strong>{{ post.author }}</strong></h6>
<a class="link padding_for_name_left" href="{{ post.get_absolute_url }}">Read More</a>
<hr />
</div>
</div>
{% endfor %}
вопрос в том как сделать перенос если символов больше 40. Мне ну вот вообще не нравится делать границу через
truncatechars:40