HTML5培训

跨平台开发常用CSS3设置--文本超出设置(超出...与跑马灯)

发布时间:2013年 08月 20日   |  作者:李宗亮

桌面平台的开发中,内容超出设定区域的大小时,我们常用的操作有三种,一个是显示,一个是隐藏,一个是出现滚动条。

在手机平台的开发中,我们常用的操作也有三种,第一是隐藏,第二是显示“。。。”,第三种是滚动显示。这篇文章主要介绍后两种的用法。

现阶段做手机开发,针对的智能手机主要是iPhone和Android,用的浏览器分别是safari和chrome。都是webkit内核,所以下面的实例代码也会针对webkit内核来写。(同时要注意一点,在浏览器和虚拟机内webview引入html时的展现效果是不同的)

第一:超出显示“...”

用到命令 text-overflow : clip | ellipsis  文本超出:截断|省略

但这一条命令是看不到效果的,需要另外两条命令配合使用,让文本能够溢出,第一个是强制一行内显示,white-space:nowrap;第二个是溢出内容隐藏,overflow:hidden;

代码实例:



<!DOCTYPE html>

<html >

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>process msmj</title>

        <style>

        h1 {color:rgba(250,100,100,0.7);height:40px;line-heihgt:40px;width:500px;

        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

        </style>

    </head>

    <body>

       <h1>梨花院落溶溶月,柳絮池塘淡淡风。</h1>

    </body>

</html>

效果图:

第二:超出跑马等效果

老的前端开发人员对于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;//跑动的速度设置。

实例:


<!DOCTYPE html>

<html >

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>process msmj</title>

        <style>

        h1 {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;

}

        </style>

    </head>

    <body>

       <h1>梨花院落溶溶月,柳絮池塘淡淡风。</h1>

    </body>

</html>


效果截图:


这里的例子是竖向超出,竖向滚动的。不用判断文本是否超出,超出多少,比用js控制简洁方便的多。推荐大家使用。

在桌面浏览器中时,当marquee-style为scroll时,不管是不是超出都会滚动,类似与之前的marquee标签。而实用alternate时,只有超出是才会滚动。但是在iPhone和iPad上开发,当系统为为5.0以下的,效果同桌面平台。当系统为5.0时,只有超出才会滚动。所以在做移动平台的开发上,这个效果还是非常实用的。


相关文章
应用于移动端WebApp开发的
CSS3跨平台开发之文本遮罩
WEBAPP开发技巧总结
自由构建UI的跨平台移动框
移动终端开发的相关知识
其他文章
提高网页加载速度---CSS
less语言特性(二) ——
less语言特性(一) ——
JavaScript中的一些坑
移动端性能大比拼:CSS
推荐大家使用的CSS书写规
 
 

版权所有:北京博看文思科技有限责任公司|(0.0488460063934s)