超出div高度，文本自动滚动（像跑马灯一样从下往上滚动）

一个div里面有文字
1、如果文字没超出div高度：文字不用滚动
2、如果文字太多超出了div高度，那些文字就自动滚动
ps:滚动的效果就像我这个设置一样
该系统于2017-06-21进行维护，望相互告知！！！

求各位大神解答。。。。

 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<style>div.marquee{overflow:hidden;background:#ccc;width:400px;height:140px;line-height:30px}</style>
<script>var s = '<div class="marquee">'; for (var i = 0; i < 10; i++) s += i + '该系统于2017-06-21进行维护，望相互告知！！！<br />'; s += '</div>';document.write(s)</script><br />
<div class="marquee">该系统于2017-06-21进行维护，望相互告知！！！</div>
<script>
    $('div.marquee').each(function () {
        if (this.scrollHeight > this.offsetHeight) $(this).html('<marquee behavior="scroll" direction="up" scrollamount="1" height="140" onmouseover="this.stop()" onmouseout="this.start()">'+this.innerHTML+'</marquee>');
    });
</script>

外层div给一个固定高度，并且overflow:hidden;
内层div高度自由。
然后用jQuery或者原生js对内层div高度判断，
如果高于外层div，就做一个无缝轮播，现在这种轮播插件很多。
如果没有高于外层div，就不处理。

建议你去Bootstrap找找，应该有类似的功能实现

#hovertreemarquee div { display: inline-block; height: 12rem; width: 30rem; position: relative; } #hovertreemarquee div:first-of-type { background: #e5233e; -webkit-transform-origin: top right; transform-origin: top right; -webkit-transform: rotateY(-40deg); transform: rotateY(-40deg); color: #fff; } #hovertreemarquee div:last-of-type { background: #b31e31; -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotateY(45deg); transform: rotateY(45deg); color: #f8c9d9; } #hovertreemarquee div { font-size: 8rem; overflow: hidden; } #hovertreemarquee div span { position: absolute; width: 400%; line-height: 1.4; } @-webkit-keyframes leftcrawl { to { -webkit-transform: translateX(-100rem); transform: translateX(-100rem); } } @keyframes leftcrawl { to { -webkit-transform: translateX(-100rem); transform: translateX(-100rem); } } @-webkit-keyframes rightcrawl { to { -webkit-transform: translateX(-130rem); transform: translateX(-130rem); } } @keyframes rightcrawl { to { -webkit-transform: translateX(-130rem); transform: translateX(-130rem); } } #hovertreemarquee div:first-of-type span { -webkit-transform: translateX(60rem); transform: translateX(60rem); -webkit-animation: leftcrawl 14s linear infinite; animation: leftcrawl 14s linear infinite; text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3); } #hovertreemarquee div:last-of-type span { -webkit-transform: translateX(30rem); transform: translateX(30rem); -webkit-animation: rightcrawl 14s linear infinite; animation: rightcrawl 14s linear infinite; }

leftText.innerText = textsource.value.toUpperCase(); rightText.innerText = textsource.value.toUpperCase(); var leftText = document.querySelector("#hovertreemarquee div:first-of-type span"); var rightText = document.querySelector("#hov"+"ertreemarquee div:last-of-type span"); var textsource = document.getElementById("textsource"); setText();

楼上正解，用marquee 就可以了

跑马灯用marquee不就可以了，溢出用overflow

div 属性 x-overflow；y-overflow去瞧瞧吧