Question

How to add html tags according to the div width?

Php code to output html:

echo '<div>'; 
$json = json_decode($json_data);
foreach ($json as $data){
    echo '<p>'.$data->title.'</p>';
}
echo '</div>';

this will out put:

<div>
<p>TWELFTH NIGHT</p>
<p>MERRY CHRISTMAS</p>
<p>CHRISTMAS GIFT</p>
<p>XMAS</p>
<p>HARD CANDY CHRISTMAS</p>
<p>GOD REST YE MERRY, GENTLEMEN</p>
<p>GOD SPEED THE PLOUGH; PLOUGH MONDAY</p>
<p>CHRISTMAS CARDS </p>
</div>

CSS

div{padding:0;margin:0;width:500px;overflow:hidden;float:left;}
p{float:left;font-size:12px;font-family:arial sans-serif;padding:0 10px 0 10px}
h2{padding:0 10px 0 10px;}

SEE REVIEW IN http://jsfiddle.net/sRVsP/

some p will turn line, because the div width is only 500px. And I want to add <h2>toggle</h2> at the end of first line (<h2>toggle</h2> including in 500px)

SEE after insert <h2>toggle</h2> in http://jsfiddle.net/sRVsP/1/

It could easy to do with jquery, but difficult in php. may be I should count each words width like this:

$json = json_decode($json_data);
foreach ($json as $data){
    echo (strlen($data->title)*7+20).'<br />';
}

6px-7px for font width of font-size:12px;font-family:arial sans-serif;, 20px for left right padding, then do something judge width words width plus, it also should consider the insert <h2>toggle</h2> width…

So can anyone give me some good way to solve my question? Automatic insert <h2>toggle</h2> at the end of first line, if too many p will turn line in a div?

may be my thought is not a right… Thanks.

Answer 1

This is obviously way overkill to do in php. I suggest using a jQuery plugin like this one to limit the height of the div and put a “show more” button underneath the div.