超出显示
用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略
但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏,overflow:hidden
超出跑马等效果
老的前端开发人员对于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//跑动的速度设置。
var marquee = new Marquee(),obj = document.getElementById("box")
marquee.init(obj)
对应的html代码：
<!DOCTYPE HTML> <html> <head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
#box {
width: 150px
height: 200px
border:1px solid #EFEFEF
background: #F8F8F8
padding:0 20px
line-height:22px
overflow:hidden
}
</style></head><body>
<div id="box">
我是靖鸣君1<br />我是靖鸣君2<br />我是靖鸣君3<br />我是靖鸣君4<br />我是靖鸣君5<br />
我是靖鸣君1<br />我是靖鸣君2<br />我是靖鸣君3<br />我是靖鸣君4<br />我是靖鸣君5<br />
</div></body></html>
当然，给了几个接口：
marquee.init(obj, {
direction: "xx", //这个还没写，一般就是top和left吧~
speed: 30})
补充一个css3下marquee的知识点
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 charset="UTF-8">
<title>Demo</title>
<style type="text/css">
h1 {
color:rgba(250,100,100,0.7)
height:40px
line-height:40px
width:400px
overflow: -webkit-marquee
-webkit-marquee-style: scroll
-webkit-marquee-repetition: infinite
-webkit-marquee-direction: right
-webkit-marquee-speed:normal
border:1px #ccc solid
margin-top: 30px
}
h1.left {
-webkit-marquee-direction: left
}
h1.up {
-webkit-marquee-direction: up
}
h1.down {
-webkit-marquee-direction: down
}</style></head><body><h1>我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1><h1 class="up">我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1><h1 class="left">我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1><h1 class="down">我是靖鸣君，靖鸣君，我是靖鸣君，靖鸣君，我是靖鸣君</h1></body></html>
