回顾上一日志较为完美的一种标题缩略显示方法 此时我越发觉得离完美还有些距离,重新试验了一下该日志中提到的 text-overflow:ellipsis 样式写法,我以自己的名义再次作个判定:用 text-overflow:ellipsis 才是一个更完美的标题缩略显示的方法,下面看例子
1 2 3 4 5 6 7 8 |
<div style="border:1px solid red;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;width=170px"> 在VC6中使用正则表达式解析字符串</div> <div style="border:1px solid red;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;width=170px"> VC中使用CInternetSession抓取网页内容</div> <div style="border:1px solid red;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;width=170px"> 开源嵌入式数据库 SQLite 简介</div> |
正常时显示效果 | 选择后显示效果(分别对应首页和日志页面选择后效果) |
|
细心看一下正常显示和拖动鼠标选择后的效果,看看原本是省略号的地方变成什么啦,这是用其他实现方法都不是很容易实现的特点。因为首页面与日志页面的样式不一样,所以右边格子里放了两张图片,注意对应一下,通过这样一个异外也给我们更好的验证了 text-overflow:ellipsis 的更强的适应性,如果用其他方式要牵强些。
比较 较为完美的一种标题缩略显示方法 中介绍的方法,这种做法十分简单,你不用关心页面显示字体会怎么变,它只认宽度,因为这一切都由浏览器来进行渲染,浏览器当然最有发言权,它自然也就最清楚自己在做什么,相反当你还在后台甚至是还未显示时的JS中进行截字符串处理,前台展示仍存太多未知数。
使用这个样式属性时,注意其他同时使用的属性的功用,可是有影响的哦,比如overflow和white-space属性值。
本文链接 https://yanbin.blog/css-text-overflow-ellipsis/, 来自 隔叶黄莺 Yanbin Blog
[版权声明] 本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。
一般是由美工写css还是程序人员写?
经常一个不是非专业的软件项目组是不配备美工的,所以只能程序员自力更生了
text-overflow:ellipsis似乎是ie才支持,还要配合nobr使用
一般程序员的审美都不咋地。。。
程序员从色彩上不必去深究,从效果、功能上还是很有必要掌握css!
@Sun
美工掌握CSS是必要的;
程序员要能读懂和修改CSS;
是的,作为程序员我觉得我的审美也是不咋地,一个界面样式或色彩这样调来,那样调来都觉得不爽,找个美女,随便调理一下就是眼前一亮
程序员还是有必要对CSS建立起概念,比如可以使用来达到什么效果