Как сдеалть перенос текста в HTML

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 %}