当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 当标题不能显示完整的解决方法

CSS样式表
css 块状元素和内联元素
CSS 盒模型、块状元素与内联元素、CSS选择器
css 浮动 理解Float的含义
CSS 清除浮动Clear
CSS 制作网页导航条(上)
CSS 制作网页导航条(下)
css 浮动(float)页面布局
css 浮动(float)页面布局(下)
css position 定位
css 定位应用实例
CSS Hack 有关浏览器兼容方面
css 单图片按钮实例(css 图片变换)
使用X-UA-Compatible来设置IE浏览器兼容模式
div overflow 超出隐藏属性使用说明
CSS 使用规则总结
div+CSS 兼容小摘
CSS的inherit与auto使用分析
如何组织和注释CSS文件
CSS样式按整洁易懂的结构组织
CSS Prism 查看和编辑CSS中用到的颜色

CSS样式表 中的 当标题不能显示完整的解决方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 62 ::
收藏到网摘: n/a

今天刚看到ChinaUI.com新改版的网站,觉得优艾网是越来越漂亮了,这次的变化的确是挺大的。一早大概的看了一下就关了,后来晚上又打开看时发现个问题。 其实建议用css控制超出隐藏显示
也就是标题因为设计的宽度问题所以没有显示全,看样子是使用程序来截字的。我想很多网站都遇到这样的情况。为了视觉效果不得不进行截字显示以满足网站的整体视觉效果。通常我们采用截字的方法是两种,一种是通过后台输出时来事先设定一定的字符数量。另一种是通过CSS或是JS来对已经输出的完整的内容进行视觉剪截。
在网页标准没有兴起的时候基本上是采用第一种方式来解决这个问题,直到现在这种方式依然被广泛地使用着。这种方式的好处就是可以准确的剪截字数,而不足可能就是因为剪截的工作在后台已经完成,所以输出的内容是残缺的。而第二种是通过CSS或是JS做出的一种障眼法。把一定长度以外的内容隐藏掉。以达到需要的视觉效果,好处就是他可以保留完整的数据内容,不足之处可能是非IE浏览器截的字并不完美。比如Firefox常常会有截半个字的尴尬现象。
我想提出的问题是:"标题的不完整是否会影响用户的点击动机?"我斗胆提出这样的论断:标题的不完整将在很大层度上影响用户是否会点击该条信息的动机。我们这里就用优艾网中的一条新闻标题来作分析。网站中有这样一条新闻标题"美国发明用户界面新技术 对着吹",这是一句被机械性截掉的标题。面对这样的标题我们的好奇心是否被勾引起来,当然有可能。但是我们的理解可能是这样的:"美国发明了用户界面的新技术,对着吹……这是个打假新闻。可能是两家公司在吹牛。"如果是这样那么这种八卦的新闻我就没兴趣了。然而这个完整的标题应该是:"美国发明用户界面新技术 对着吹气就能操作计算机"对于这样的标题我就比较有兴趣,我想知道这个吹气为什么就能操作计算机呢,这是我从来没想到过的事。这样我就会有极大的兴趣去点击查看这条新闻。我们可以比较发现,其实最容易勾起我们好奇心的其实是"吹气操作"。这是新技术的核心。也是这个新闻的核心内容。
当然有时候截字是必需的,否则整个网站就会显得很杂乱。那么现在一般的解决方法就是在链接上加入"title"属性。遇到这种语义不清楚的标题时我通常是鼠标悬停查看提示区中的文字以获得比较完整的标题信息。从而完成我是否点击该新闻的判断。但是可惜的是优艾网标题链接中的title属性与标题内容是一样的,如此一来title属性的意义大减。
我们在设计的时候当然是尽可能的把标题显示完整,如果因为特需原因没办法显示完整的时候要尽可能的使title属性是完整的。还有虽然CSS的截字在Firefox中是有缺陷的,但是我还是觉得截字的事应该由CSS来完成。至少这样我们可以得到一个完整的HTML信息文档。当无CSS的时候至少我们同样可以看得到完整的信息内容。