css - 当文本长度超过容器时，文本溢出会消失，并在悬停时滚动

Question

我有一个 jquery/css 问题。

我想知道您是否知道如何在列表项(比其容器更长的列表项)中创建链接而不换行，而是保留在单行上并淡出/切断溢出的其余部分关联。此外，当用户将鼠标悬停在链接上(悬停时)时，链接将“滚动”(从右到左)以显示文本的其余部分。

此外，文本不一定要“淡出”，而只需从容器边缘切掉几个像素即可。

.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%;
}

有什么想法可以实现这一目标吗？

想要的外观:

http://i1132.photobucket.com/albums/m563/carrako/link_face.jpg

Answer 1

要“截断”文本，请使用以下 CSS:

.list_wrapper li {
    overflow: hidden;
}

.list_wrapper li a {
    white-space: nowrap;
    position: relative; // Needed for the animation!
}

然后，对于“股票行情”动画，使用动画框架，例如jQuery，“移动”<a>元素悬停时(动画 CSS left -property)；但仅限于 offsetWidth元素的宽度超过了父节点的宽度(否则我们不需要滚动)。上mouseout ，我们停止动画并将元素移回来。

示例，使用 jQuery :

$('.list_wrapper li a').mouseover( function() {
    if( this.offsetWidth > this.parentNode.offsetWidth ) {
        $(this).animate({'left': '-'+(this.offsetWidth)+'px'}, 5000, function(){this.style.left='0px';});
    }
} ).mouseout( function() {
    $(this).stop();
    this.style.left = '0px';
} );

要使此 JavaScript 代码段正常工作，您需要将 jQuery 框架嵌入到您的网站中。该代码片段应在页面加载完成时执行:要么将其放在 HTML 的最末尾(就在 </body> 之前)，要么触发它 window.onload .

有关运行示例，请参见此处:
http://jsfiddle.net/z7V7d/2/

编辑:其实，我不喜欢为别人做作业；但我这样做很有趣，所以我想没关系。我根据您的意愿更新了代码。 ;)