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

最新推荐文章于 2023-12-27 11:25:01 发布

原创最新推荐文章于 2023-12-27 11:25:01 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#文字溢出 #滚动 #平移

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

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>