css 超出文字头尾相接滚动_【转载】CSS3 ——文本超出设置超出显示...与跑马灯效果...

关注

原创最新推荐文章于 2023-10-09 14:25:49 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

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

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

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

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

用到命令 text-overflow

： clip | ellipsis

文本超出：截断|省略

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

代码实例：

process msmj

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

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;

}

梨花院落溶溶月，柳絮塘淡淡风。

效果截图：

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

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