Как создать разрыв текстовой строки внутри div?

Question

У меня есть какой-то текст, который выходит за границы поля, который я сделал.Я пытался использовать display, чтобы разбить его на две строки, но есть ли другой способ использовать CSS или HTML, чтобы разделить его?

Css

.awpcp-listing-title {display: table-column;} 

не работает

<div class="awpcp-listing-excerpt $awpcpdisplayaditems 
$isfeaturedclass" data-breakpoints-class-prefix="awpcp- 
listing-excerpt" data-breakpoints='{"tiny": [0,328], 
"small": [328,600], "medium": [600,999999]}'>
<div class="awpcp-listing-excerpt-thumbnail">
$awpcp_image_name_srccode
</div>
<div class="awpcp-listing-excerpt-inner" style="w">
<h4 class="awpcp-listing-title">$title_link</h4>
<div class="awpcp-listing-excerpt-content">$excerpt</div>
</div>
<div class="awpcp-listing-excerpt-extra">

$awpcp_city_display
$awpcp_state_display
$awpcp_display_adviews
$awpcp_display_price
$awpcpextrafields

Answer 1

Вы говорите о выделенном зеленым цветом тексте на закругленных карточках? Если это так, у вас установлено свойство line-height размером 80px, в результате чего текст выходит за пределы поля. Это должно исправить это, если вы говорите об этом:

.awpcp-listing-excerpt-extra {
    line-height: normal;
}

Answer 2

для переполнения текста вы можете использовать пробел и свойство переноса слов, чтобы контролировать, как текст должен быть перенесен и разбит на вторую строку.

например:

.break-words{
    white-space: pre-wrap;
    word-break: break-word;
}