超出显示
用到命令 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//跑动的速度设置。
在css中让文字显示方式从右边开始的操作方法和步骤如下：
1、首先，创建一个新的html文档，见下图红框中的内容，然后进入下一步。
2、其次，完成上述步骤后，可以更改文档的名称，见下图红框中的内容，然后进入下一步。
3、接着，完成上述步骤后，输入文本，见下图红框中的内容，然后进入下一步。
4、然后，完成上述步骤后，进一步设置以下文本的对齐方式，示例代码如下图所示，然后进入下一步。
5、最后，完成上述步骤后，在浏览器中预览，文本右对齐，见下图红框中的内容。这样，问题就解决了。
1.需要文字跑到结束再重新开始，需要开启定时器
2.从右向左移动，需要用到css 的 transform，设置transLateX,
3.何时重新跑的条件设置需要占位多宽 offsetWidth 属性
4.一行和多行需要区别判断
1.css部分：
<div class="ul_box" @click="checkWidth()">
<ul class="ul_id">
<li class="li_id">
<span class="content_id">
{{message.Content}}
啊啊啊啊，
</span>
</li>
</ul>
</div>
2.js部分
checkWidth(){
let spanEle = document.querySelector('.content_id')
let offsetWidth = spanEle.offsetWidth
let liEle = document.querySelector('.li_id')
let initOffset = liEle.offsetWidth-10
liEle.style.transform = 'translateX(' + initOffset + 'px)'
console.log(offsetWidth)
let index = 0
let timer = setInterval(function() {
index++
var translatex = initOffset - index * 5
if (offsetWidth <initOffset) {
if (translatex <= 0) {
translatex = initOffset
index = 0
}
}
if (index >offsetWidth/5 &&offsetWidth >initOffset) {
translatex = initOffset
index = 0
}
liEle.style.transform = 'translateX(' + translatex + 'px)'
}, 150)
},
