JS新闻贴纸

Question

我有一个网站，想要一个电视节目风格的滴答机&我只是回去重新查看和检查它们&注意到显示器开始出现故障。我希望你们中更有经验的JS老兵能帮我找出我哪里出了问题，在这里。

我的联合来文如下：

$('.sidescroll').totemticker({
row_height  :   '120px',
next        :   '#ticker-next',
previous    :   '#ticker-previous',
stop        :   '#stop',
start       :   '#start',
mousestop   :   true 
});

jQuery(".sidescroll li").append("<hr />");

它的我的CSS如下：

.sidescroll {
    height: 100% !important;
    display: block;
}

.sidescroll li {
    margin: 10px;
    text-align: left;
    height: 120px;
}

.sidescroll hr {
     height: 3px; 
     border: 0; 
     box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}

.sidescroll li a {
    font-family: 'lulo' !important;
}

.sidescroll li a:hover {
    text-decoration: none;
    color: #5c4770;
}

这个代码是他们的博客文章的代码，类似于一个正在运行的帖子列表，这个列表是由列表类别插件拉出来的&摘录限制在20个字符以内。我注意到的问题是，水平行开始与几个帖子进行交互，而站点设置时的情况并非如此。

Answer 1

结果很简单。有时盒子里有太多的内容，它们会溢出到下面的盒子里。无论是太多的文本，还是单词包装，都被分割成太多的行。

奖金(完全可选)

我们可以优雅地抑制这种行为(假设使用CSS3生成梯度)。

首先修改javascript以插入作为第一个子子的水平线，然后插入一个带有类的div作为最后一个子类：

jQuery(".sidescroll li").prepend('<hr />');
jQuery(".sidescroll li").append('<div class="fadeToWhite"></div>');

然后修改css：

.sidescroll {
    height: 100% !important;
    display: block;
}

.sidescroll li {
    margin: 10px;
    text-align: left;
    height: 120px;

    /* additions: */
    position: relative;
    overflow: hidden;
}

.sidescroll hr {
     height: 3px;
     border: 0;
     box-shadow: inset 0 3px 3px -3px rgba(92, 71, 112, 0.75);
}

.sidescroll li a {
    font-family: 'lulo' !important;
}

.sidescroll li a:hover {
    text-decoration: none;
    color: #5c4770;
}

/* additions */
.sidescroll li div.fadeToWhite {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0;
    background: linear-gradient(transparent, white);
}

这将隐藏任何溢出的文本，同时将附加的div转换为每个列表元素底部的淡出白条，以避免硬文本剪切。