Question

如何根据div宽度添加html标签？

输出html的PHP代码：

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

这将出局：

<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;}

在http://jsfiddle.net/sRVsP/

中查看评论

某些p会转行，因为div宽度仅为500px。我想在第一行末尾添加<h2>toggle</h2> <h2>toggle</h2>，包括500px}

在http://jsfiddle.net/sRVsP/1/

中插入<h2>toggle</h2>后查看

使用jquery很容易，但在php中很难。也许我应该像这样计算每个单词的宽度：

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

6px-7px的字体宽度为font-size:12px;font-family:arial sans-serif;，20px为左右填充，然后执行判断宽度为words width plus的事情，还应考虑插入<h2>toggle</h2>宽度...

那么有人能给我一些解决问题的好方法吗？在第一行末尾自动插入<h2>toggle</h2>，如果p太多会在div中转换行？

可能是我的想法不对...谢谢。

Answer 1

这在php中显然有些过分。我建议使用像this one这样的jQuery插件来限制div的高度，并在div下面放置一个“显示更多”按钮。

php根据div宽度添加html标签

1 个答案: