小虾虎鱼

小虾虎鱼

使用CSS样式实现裁剪标题长度

作者 禾惠 发表于 2012/08/20,最后修改于 2012/08/20

    以前裁剪文章标题使用PHP做的,最近才发现原来CSS是可以实现“裁剪”标题长度的,这里的裁剪并非真的裁剪了标题,而是隐藏了多余的文字并用三点来替代。这样一来给程序带来了许多方便,而且又有利于搜索引擎优化。

如下代码:

<div style="width:200px;font-family:arial;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
    <a href="#">小虾虎鱼,一个网站前端开发的博客。</a>
</div>

效果如下:

个人觉得使用arial字体会使后面的三点好看些。