title: Text overflow fades when longer than container and scrolls across on hover
body: <p>I had a jquery/css question. </p>
  
  <p>I was wondering if you knew how to make a link in a list item (one that is longer that its container) not wrap to a new line and instead stay on 1 single line and fade/cut off the overflowing rest of the link. Also, the link would "ticker" (right to left) across to show the remainder of the text when the user rolled over it (on hover).</p>
  
  <p>Also, the text doesn't have to be necessarily "faded out" but could just be cut off a few pixels from the edge of the container.</p>
  
  <pre><code>.list_wrapper li {
  display: block;
  height: 23px;
  margin: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
  
  .list_wrapper li:last-child {
  margin-bottom: 5px;
  }
  
  .list_wrapper li:nth-child(odd) {
  background:#FAFAFA;
  border-top: 1px solid #FAFAFA;
  border-bottom: 1px solid #FAFAFA;
  }
  
  .list_wrapper li:nth-child(even) {
  background:#FFFFFF;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  }
  
  .list_wrapper li:hover {
  cursor: default;
  background: #F3F3F3;
  border-top: 1px solid #E9E9E9;
  border-bottom: 1px solid #E9E9E9;
  }
  
  .list_wrapper a {
  color: #145F92;
  font: 400 11px/23px "Lucida Grande", tahoma, verdana, arial, sans-serif;
  margin-left: 13px;
  -webkit-transition: color .3s ease;
  -moz-transition: color .3s ease;
  -ms-transition: color .3s ease;
  transition: color .3s ease;
   }
  
  .list_wrapper a:hover { text-decoration: underline; }
  
  .article_list {
  float:left;
  display: block;
  width:100%;
  }
  </code></pre>
  
  <p>Have any ideas how I could achieve this?</p>
  
  <p>Wanted look:</p>
  
  <p><a href="http://i1132.photobucket.com/albums/m563/carrako/link_face.jpg" rel="nofollow">http://i1132.photobucket.com/albums/m563/carrako/link_face.jpg</a></p>