小技巧：css截字，如何避免出现半个字

真是很简单到不能称之为技巧的技巧，以前怎么没想到呢@_@

通常我们限定字符长度的时候可能会这么做：

<div style="width:503px;margin:1em;overflow:hidden;line-height:1.5em;background:#9cf;font-size:12px">
<p style="float:left;width:383px;margin:0;overflow:hidden;white-space:nowrap">1月19日，来自著名的《超级机器人大战》系列在NDS上即将于w4月2日推出的最新作品《超级机器人大战K》开放了官方w网站</p>
<p style="float:right;width:110px;margin:0;background:#eee;text-align:right">2009-1-19 15:48:51</p>
</div>

可以看到，由于是中英文混排并且不是等宽的宋体，如果不考虑text-overflow:ellipsis，很容易出现半个字的情况，怎么解决呢？这个方法大家应该都应用过：

<div style="width:503px;margin:1em;overflow:hidden;line-height:1.5em;background:#9cf;font-size:12px">
<p style="float:left;width:383px;height:1.5em;margin:0;overflow:hidden">1月19日，来自著名的《超级机器人大战》系列在NDS上即将于4月2日推出的最新作品《超级机器人大战K》开放了官w方网站</p>
<p style="float:right;width:110px;margin:0;background:#eee;text-align:right">2009-1-19 15:48:51</p>
</div>

囧~

收藏到网摘：新浪VIVI  365Key  POCO网摘  和讯网摘  我摘