发布于

多行文本溢出显示省略号(…) text-overflow: ellipsis

text-overflow 属性规定当文本溢出包含元素时发生的事情。

默认值：  clip
继承性：  no
版本：  CSS3
JavaScript 语法：  object .style.textOverflow="ellipsis"
语法： text-overflow: clip|ellipsis| string ;

然而，text-overflow:ellipsis; 不可独立使用，必须结合overflow:hidden;  white-space:nowrap;才生效。但是而white-space:nowrap; 是指不换行，就是说只能一行显示。如果我们想要实现多行的情况下，在最后一行的最后用“…”来表示，则可以： 继续阅读“多行文本溢出显示省略号(…) text-overflow: ellipsis”

发布于

移动端样式小技巧

本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。

一、line-height
line-height经常用于文字居中，当然也有小伙伴会用上下padding去写.but！不管你用padding还是line-height，不同手机显示效果还是…不一样。
一般会这样写：

.demo{
height:16px;
line-height:14px;
font-size:9px;
border:1px solid #ff6815;
}

嗯，在我们的chrome由于字体小于9px已经看不出边框和字之间的间隙了，再来看看Android和IOS的
魅蓝文字已经飞起~， ios正常显示
如果把line-height加1px，iPhone文字就会下移，由于我们app的ios用户居多，并且android机型太多，不同机型也会显示不同，所以只能退而求其次了。
line-height的兼容问题不太好解决，容器高度越小，显示效果的差距越明显。稍微大一点的高度，最好把line-height设置为高度+1px，两个平台显示都还不错。 继续阅读“移动端样式小技巧”

发布于

CSS禅意花园学习笔记系列01-结束部分

花了一个星期的时间,有些随意,也有些带着解惑的态度,从头到尾有选择性地看完《CSS禅意花园》这本书.收获自然是少,盛名之下,名符其实.然而带给我的更多的是冲击!!
虽然是业余的Web爱好,但从建第1个站开始,到如今也有4年的历史了,真真切切的面对CSS技术却还是从这本书开始.一边看书,一边用书里的一些看法调整着自己的网页,……一个星期过去了,书看完了,我也完成了2个页面的调整,带来的冲击却无法退却!! 继续阅读“CSS禅意花园学习笔记系列01-结束部分”