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!
}

然后，对于“ticker” - 动画，使用动画框架，例如jQuery，当它悬停时“移动”<a>元素（动画CSS left - 属性）;但仅限于，如果元素的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-Snippet正常工作，您需要将jQuery框架嵌入到您的网站中。页面加载后应该执行代码段：要么将其放在HTML的最末端（就在</body>之前），要么触发它window.onload。

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

编辑：实际上，我不喜欢为别人做功课;但我很乐意这样做，所以我猜它没关系。我根据您的意愿更新了代码。 ;）

文本溢出在超过容器时会消失，并在悬停时滚动

1 个答案: