当我看到这道题目时,第一想法就是“出这道题的人真的太BT了”。
以下是考题要求
- 1,结构良好,符合标准。
- 2,时间和标题间距为10Px。
- 3,标题过长时截取多余字符,但时间必须保持完整。
- 4,多浏览器兼容。
- 5,必须使用CSS来实现。
这道题的关键是display,position属性的理解,和overflow:hidden;的灵活应用,以下是我的解答流程。
编写结构。
<ol>:
<li><a href="">Title</a><span>date</span></li>
<li><a href="">Title</a><span>date</span></li>
</ol>
可以肯定,这个结构是标准且良好的,接下来不管发生什么问题,将尽量避免重写结构。
构思方案。
使用position:absolute;将span标签抽离出文档流,这样的话span将和li脱离父子关系,li的overflow:hidden;属性也将无法作用到span了。
但实际结果却变成了,视觉上li已经被截取了,但却上却还占据着空间。这个原因我找了好久都没有找到解释。没办法只能换个思路。
解决问题。
最终我是用截取高度的思路解决了这个问题
即使思路正确,在最终解决前依然碰到了很多的兼容性问题。这真是一道非常考验人活用CSS的考题。

真个站都是你搭的吗?太厉害了。。
我也在学css,这个站非常漂亮,简洁又不失创意,收藏了。。
话说你是专业制作网站的不?
谢谢^_^
=.= 路过……看看就好……
前辈,您好!我看了您的源代码。自己也调试了下。不过发现标题换成英文overflow:hidden就无效了。文本超出设定宽度。这是为什么呢?
Title2008.12.5
TitleTitledate:2008.12.5
TitleTitleTitledate:2008.12.5
TitleTitleTitleTitledate
TitleTitleTitleTitleTitleTitleTitleTitleTitledate
TitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitle
TitleTitleTitleTitleTitleTitledate:1987.07.30
To:foodly
因为你的英文没有断词,英文的换行规则是以单词来分的。
而这个方法overflow:hidden裁切的是内容高度而不是平常的宽度。这个在Dreamweaver设计视图里可以看到。
另外在朋友那得知,我使用的方法不是那个公司的标准答案,呵呵~如果你有兴趣可以换一个思路来做一下。