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?


.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">
<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 class="awpcp-listing-excerpt-extra">


2 Answers

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:

    white-space: pre-wrap;
    word-break: break-word;
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;