文字溢出部分自动滚动显示

来源：互联网发布：mysql显示前10行编辑：程序博客网时间：2024/06/05 21:15

我们在一定区域里面写文字的时候经常会出现文字溢出的现象，一般情况下会使用

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

实现溢出隐藏，即用省略号代替溢出的部分，这样比较美观而且溢出部分的详情也可以点进相应的详情页面去查找，但是如果这段文字本来就在详情页面里面了还能用省略号代替么？显然是不可以的，这时我们可以让文字溢出部分自动滚动显示。如图：

代码如下：

<!doctype html><html><head>    <meta charset="UTF-8">    <title>test</title>    <style type="text/css">        *{ margin:0; padding:0;}        body{font:12px/1 '微软雅黑';background: #fff;}        .wrap{ width:140px; padding:10px;}        .info{ padding-top:10px; overflow:hidden;}        .inner{ width:1000px;height:172px; height:17px; line-height:17px; overflow:hidden;}        .inner p{ display:inline-block;}    </style></head><body><div class="wrap">    <div class="img"><img src="http://dummyimage.com/140x90/" alt=""/></div>    <div id="info" class="info">        <div class="inner">            <p class="txt">文字如果超出了自动向左滚动</p>        </div>    </div></div><script>    function scroll(){        var info = document.getElementById('info');        var div = info.getElementsByTagName('div')[0];        var p = document.getElementsByTagName('p')[0];        var p_w = p.offsetWidth;        var div_w = info.offsetWidth;        if(div_w > p_w){ return false; }        div.innerHTML += div.innerHTML;        setInterval(function(){            if(p_w <= info.scrollLeft){                info.scrollLeft -= p_w;            } else {                info.scrollLeft++;            }        }, 30);    }    scroll();</script></body></html>

1 0