столбец начальной загрузки не отвечает и слишком долго после переноса слов

Question

Столбцы начальной загрузки не реагируют после выполнения переноса слов: break-word;

Я использую загрузочные cdns.

Я реализовал это, чтобы предотвратить переполнение текста описания.вне колонки, но есть много лишних пробелов.Извлечение текста описания приводит к тому, что столбец отзывчив.

<div class="row">
    <div class="col-md-9 theborder stopoverflow">
        Description:
     {{event.description | safe}}
    </div>

Вот мой css:

.stopoverflow {
    word-wrap: break-word;
}

Изображение вопроса

Спасибо за помощь!

Answer 1

используйте слово-break: break-all;вместо 'word-wrap: break-word'

word-break: break-all Независимо от того, является ли это непрерывным словом или множеством слов, break-all разбивает их по краю шириныограничение даже внутри символов одного и того же слова

word-wrap: break-word Это перенесет длинные слова на следующую строку.Брейк-слово корректирует разные слова, чтобы они не разбивались по середине.

Проверьте подробную информацию: https://www.w3.org/TR/css-text-3/#overflow-wrap-property

div {
  border: 1px solid ;
   width: 300px;
}

span {
  background-color: gray;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>
<div class="break-all">
 DASDSD <span>ASDASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
  </span> 
</div>
<br>
<b> word-wrap:break-word</b>

<div class="break-word">
  DASDSD <span>ASDASDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
  </span> 
</div>