桌面平台的开发中,内容超出设定区域的大小时,我们常用的操作有三种,一个是显示,一个是隐藏,一个是出现滚动条。
在手机平台的开发中,我们常用的操作也有三种,第一是隐藏,第二是显示“。。。”,第三种是滚动显示。这篇文章主要介绍后两种的用法。
现阶段做手机开发,针对的智能手机主要是iPhone和Android,用的浏览器分别是safari和chrome。都是webkit内核,所以下面的实例代码也会针对webkit内核来写。(同时要注意一点,在浏览器和虚拟机内webview引入html时的展现效果是不同的)
第一:超出显示“...”
用到命令 text-overflow
: clip | ellipsis
文本超出:截断|省略
但这一条命令是看不到效果的,需要另外两条命令配合使用,让文本能够溢出,第一个是强制一行内显示,white-space:nowrap;第二个是溢出内容隐藏,overflow:hidden;
代码实例:
process msmjh1 {color:rgba(250,100,100,0.7);height:40px;line-heihgt:40px;width:500px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
梨花院落溶溶月,柳絮 塘淡淡风。
效果图:
第二:超出跑马等效果
老的前端开发人员对于marquee标签肯定不陌生,一个被淘汰的标签,被刚入门的新手所喜爱,因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时,使这个标签退出历史舞台,大家纷纷改用js来实现无间断滚动等效果。
新的CSS3
marquee设置,可以说功能强大了很多,更加易操作,用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。
对于这个属性的定义,W3C标准用法和webkit内核浏览器的支持用法并不相同,由于我们立足实战实用,所以这里只介绍好用的。可用的。
我们需要四句常用命令:
overflow:-webkit-marquee;//指定溢出时滚动。
-webkit-marquee-style:scroll | slide
| alternate;
//跑马灯样式,分三种。scroll,从一端滚动到另一端,内容完全滚入(消失)时重新开始。slide,从一端滚到另一端,内容接触到另一端后,立马重新开始。alternate,内容不跑到显示区域外,在里面来回碰壁反弹。这里主要用第一种。
-webkit-marquee-repetition:infinite
| number;// 跑马灯跑的次数,infinite
为无限多次,不结束。或者可以用正整数设置滚动的次数。
-webkit-marquee-direction:up | down
| left | right;
//跑动的方向,这个要注意结合实际情况,即实际你操作的标签文本流溢出在哪个方向溢出。
-webkit-marquee-speed:slow | normal
| fast;//跑动的速度设置。
实例:
process msmjh1 {color:rgba(250,100,100,0.7);height:40px;line-heihgt:40px;width:400px;
overflow: -webkit-marquee;
-webkit-marquee-style: scroll;
-webkit-marquee-repetition: infinite;
-webkit-marquee-direction: up;
-webkit-marquee-speed:slow;
border:1px #ccc solid;
}
梨花院落溶溶月,柳絮 塘淡淡风。
效果截图:
这里的例子是竖向超出,竖向滚动的。不用判断文本是否超出,超出多少,比用js控制简洁方便的多。推荐大家使用。
在桌面浏览器中时,当marquee-style为scroll时,不管是不是超出都会滚动,类似与之前的marquee标签。而实用alternate时,只有超出是才会滚动。但是在iPhone和iPad上开发,当系统为为5.0以下的,效果同桌面平台。当系统为5.0时,只有超出才会滚动。所以在做移动平台的开发上,这个效果还是非常实用的。