post_excerpt) { $description = $post->post_excerpt; } else { $description = substr(strip_tags($post->post_content),0,220); } $keywords = ""; $tags = wp_get_post_tags($post->ID); foreach ($tags as $tag ) { $keywords = $keywords . $tag->name . ", "; } }?>

两句 CSS 完美截断侧栏最新评论列表

常见的侧栏最新评论列表一般有两种格式:路人甲 发表于 某某文章,或者 路人乙:引言…… 它们都有个问题,就是换行很难控制,长短不一,有时候内容还会把页面撑破。老肥研究了很久 CSS 手册,找到了一个符合标准的办法,像现在我的侧栏 widget 一样,强制只显示一行,多出来的一刀切断,是不是有点像 Gmail 里面的预览文字?方法很简单,比如我的侧栏 widget 是 <div class="widget">, 要对它下面的 <li> 进行截断,那么用下面的 CSS 来强制不换行,溢出部分隐藏:

.widget li {
  white-space: nowrap;
  overflow: hidden;
}

视其父容器属性的不同,在 IE 下可能无法截断,那么在上面两句后再跟一个 width 定义就可以了。如果不喜欢一个字被切成两半,或者想多显示一行引言,可以这样做:

.widget li {
  height: 3.6em;
  overflow: hidden;
}

这里是给每个 <li> 限定高度,溢出部分截断。em 是一个相对的单位,调试一下选一个合适的数值,一行两行都可以实现,像下图。或者用 max-height 代替 height, 兼容性待考。需要最后跟个省略号的话可以试试 text-overflow: ellipsis; 是个非标准属性,我没有试过,不知道好不好用 🙂

最新评论

  • Shawna Kenyon Are you looking for powerful advertising that delivers real results? I apologize for sending you this message on your contact form but actually that was the whole point. We can send your ad copy to sites via their contact pages just like you're receiving this note right now. You can specify targets by keyword or just execute mass blasts to sites in the location of your choice. So let's say you're looking to push through an ad to all the mortgage brokers in the US, we'll scrape websites for just those and post your ad message to them. Providing you're advertising some kind of offer that's relevant to that type of business then you'll be blessed with an amazing response! Shoot me a reply to ethan3646hug@gmail.com for the details Greasemonkey 脚本推荐:在任何填邮箱的地方自动提示 Gmail 联系人
  • cheap jordan shoes I wish to show my gratitude for your generosity in support of people that should have help on this area. Your special commitment to getting the message all over had become incredibly good and has frequently allowed people much like me to achieve their targets. This useful useful information signifies this much to me and much more to my mates. Thank you; from all of us. Google 嵌入式日历重大更新
  • Fredericka McGuirk Need to find effective online promotion that isn't completely full of it? I apologize for sending you this message on your contact form but actually that was kinda the point. We can send your ad text to sites through their contact pages just like you're receiving this message right now. You can target by keyword or just start bulk blasts to websites in any country you choose. So let's say you want to push through an ad to all the contractors in the United States, we'll scrape websites for only those and post your ad message to them. As long as you're advertising a product or service that's relevant to that business category then your business will get awesome results! Write a quick note to evie2535gre@gmail.com to get info and prices Greasemonkey 脚本推荐:在任何填邮箱的地方自动提示 Gmail 联系人
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • 央街浪子 这个博客居然还在,真是老股东了。 我为什么爱 Twitter

发表您的评论

您的评论将回复给 原评论者

:D:):O8):(8D;DXD:P:nice::rainbow::cafe::love::cake:

目前有 19 条评论

  

竟然还没评论

CSS达人,赞一个

这个方法不错,我也去试试。
不过还是发现你这里有字被切两半了


fisio 回复: 我个人更喜欢这种截断,嘿嘿

不喜欢输出评论列表

因为Spam太多了


fisio 回复: 你。。。不会没启用反垃圾插件吧?我这里日均拦截50条 👿

text-overflow: ellipsis似乎是CSS3的,现在好多只支持到CSS2
这种方法便捷,简单
不过不彻底,只是隐藏
权衡一下利弊再用:)


fisio 回复: 我现在就用 nowrap 了,挺好呢嘛

使用overflow属性,应该指定heigh和width值的,溢出来的那部分隐藏掉美观多了,另外还不影响SEO。

css菜鸟前来取经~

test一下下

从老肥整体页面可以看出,老肥对css确实研究得比较透,页面看起来,很有层次感,佩服!

我喜欢让它换行....哈哈..

呵呵,我好几天前就在用两句了,只不过没有像你这么乐于分享地把它写出来:)

另外,spam不会在前台输出的。


fisio 回复: 呵呵,看到你的了

这是IE私有的属性,放到非IE浏览器上面就不行鸟~


fisio 回复: white-space 和 overflow 都是标准属性。后面的确有两个非标准的,但是我说明了呀 😀

话说我前几天用了第一段代码,结果是Firefox2+3和IE 7下完美显示,但是在IE 6下却导致侧边栏跑到日志下方.一般是侧边某个模块超出CSS中的Width定义才会这样.


fisio 回复: 这的确是 IE6 的问题,IE6下主题撑破也是经常的事情了……解决办法是文中说的另外定义 width, 如果效果还不好,试试 IE hack 大法之——星号吧 :p

恩,溢出部分直接隐藏就可以了……

恩,两行得很不错,我喜欢:)

:nice: 学习啦,谢谢!

呵呵,这样就够用了:D

好地方,以后常来

还好。