神奇的CSS样式属性 text-overflow:ellipsis

回顾上一日志较为完美的一种标题缩略显示方法 此时我越发觉得离完美还有些距离,重新试验了一下该日志中提到的 text-overflow:ellipsis 样式写法,我以自己的名义再次作个判定:用 text-overflow:ellipsis 才是一个更完美的标题缩略显示的方法,下面看例子

正常时显示效果 选择后显示效果(分别对应首页和日志页面选择后效果)
在VC6中使用正则表达式解析字符串
VC中使用CInternetSession抓取网页内容
开源嵌入式数据库 SQLite 简介
          

细心看一下正常显示和拖动鼠标选择后的效果,看看原本是省略号的地方变成什么啦,这是用其他实现方法都不是很容易实现的特点。因为首页面与日志页面的样式不一样,所以右边格子里放了两张图片,注意对应一下,通过这样一个异外也给我们更好的验证了 text-overflow:ellipsis 的更强的适应性,如果用其他方式要牵强些。

比较 较为完美的一种标题缩略显示方法 中介绍的方法,这种做法十分简单,你不用关心页面显示字体会怎么变,它只认宽度,因为这一切都由浏览器来进行渲染,浏览器当然最有发言权,它自然也就最清楚自己在做什么,相反当你还在后台甚至是还未显示时的JS中进行截字符串处理,前台展示仍存太多未知数。

使用这个样式属性时,注意其他同时使用的属性的功用,可是有影响的哦,比如overflow和white-space属性值。

 

本文链接 https://yanbin.blog/css-text-overflow-ellipsis/, 来自 隔叶黄莺 Yanbin Blog

[版权声明] Creative Commons License 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。

Subscribe
Notify of
guest

7 Comments
Inline Feedbacks
View all comments
Sun
Sun
16 years ago

一般是由美工写css还是程序人员写?

Unmi
16 years ago

经常一个不是非专业的软件项目组是不配备美工的,所以只能程序员自力更生了

coca
coca
16 years ago

text-overflow:ellipsis似乎是ie才支持,还要配合nobr使用

Sun
Sun
16 years ago

一般程序员的审美都不咋地。。。

javaeye
javaeye
16 years ago

程序员从色彩上不必去深究,从效果、功能上还是很有必要掌握css!

javaeye
javaeye
16 years ago

@Sun

美工掌握CSS是必要的;

程序员要能读懂和修改CSS;

Unmi
16 years ago

是的,作为程序员我觉得我的审美也是不咋地,一个界面样式或色彩这样调来,那样调来都觉得不爽,找个美女,随便调理一下就是眼前一亮

程序员还是有必要对CSS建立起概念,比如可以使用来达到什么效果