I have some text which is flowing over the box border I have made. I've tried using display to break it up into two lines, but is there any other way of using css or html to divide it?

Css

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

doesn't work

<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

2 Answers

0
Ahmd Rmdan On

for overflowing text you can white-space and word-break property to control how text should be wrapped and break into a second line.

for example:

.break-words{
    white-space: pre-wrap;
    word-break: break-word;
}
0
Amanda K. On

Are you talking about the green highlighted text on the rounded cards? If so, you have a line-height property of 80px set, which is causing the text to push outside the box. This should fix that, assuming that's what you're talking about:

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