javascript - JS newsticker issues -

i have site wanted tv credits-style ticker & went revisit & check on them & noticed display starting break down. i'm hoping of more experienced js veterans can me figure out i've gone wrong, here.

my js follows:

$('.sidescroll').totemticker({ row_height  :   '120px', next        :   '#ticker-next', previous    :   '#ticker-previous', stop        :   '#stop', start       :   '#start', mousestop   :   true  });  jquery(".sidescroll li").append("<hr />"); 

and css follows:

.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 {     font-family: 'lulo' !important; }  .sidescroll li a:hover {     text-decoration: none;     color: #5c4770; } 

the ticker blog posts, sort of running list of posts, being pulled list category plugin & limited 20 characters excerpt. issue noticed horizontal row starting interact couple of posts, not case when site set up.

turns out it's simple. there content in boxes , overflow 1 below. either text or word wrapping splitting on many lines.

bonus (completely optional)

we can elegantly suppress behavior (assuming use of css3 generate gradient).

first modify javascript insert horizontal line first child, insert div class last child:

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

then modify 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 {     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); } 

this hide overflowing text while turning additional div fade-to-white bar @ bottom of each list element avoid hard text-cut.