对于CMS
来说,经常遇到的一个问题就是文章的标题有时候过长,需要我们隐藏多余的部分,并以类似...
的方式表示只显示了部分文字。
那么通常实现的办法可以在动态调取文章标题时,使用substr
函数:
<?php
substr($post_title, 0, 55);
?>
当然,substr
只针对于单字符文字,若是像中文这种多字符文字(multi-byte string),我们需要使用
<?php
mb_substr($post_title, 0, 55);
?>
否则将会出现乱码。
那么今天我们要来介绍一下怎么利用纯CSS来实现这样的功能。
首先将我们的标题加上post-title
这个class
,然后添加以下CSS代码:
.post-title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
这样就大功告成了!是不是超级简单呢;)