php add html tags according to the div width
<p>How to add html tags according to the div width?</p>

<p>Php code to output html:</p>

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

<p>this will out put:</p>

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

<p>CSS </p>

<pre><code>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;}
</code></pre>

<p>SEE REVIEW IN <a href="http://jsfiddle.net/sRVsP/" rel="nofollow">http://jsfiddle.net/sRVsP/</a></p>

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

<p>SEE after insert <code>&lt;h2&gt;toggle&lt;/h2&gt;</code> in <a href="http://jsfiddle.net/sRVsP/1/" rel="nofollow">http://jsfiddle.net/sRVsP/1/</a></p>

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

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

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

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

<p>may be my thought is not a right... Thanks.</p>
