當文字溢出時長度超過容器並在滾動時滾動

我想知道如果你知道如何在列表項中創建一個鏈接（一個長度比它的容器長的鏈接），而不是換行到一個新行，而是停留在一個單獨的行上，並淡化/切斷溢出的鏈接。此外，鏈接將「滾動」（從右到左）以顯示文本的其餘部分，當用戶翻轉它時（懸停）。

此外，文本不一定必須「淡出」，但可以從容器的邊緣切掉幾個像素。

.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

來源

2011-09-30 carrako

要「切斷」的文字，使用下面的CSS：

.list_wrapper li { 
    overflow: hidden; 
} 

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

然後，對於「股票」 - 動畫，使用animation-框架，例如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的代碼片段工作，你需要jQuery的框架嵌入到你的網站。當頁面完成加載時，應該執行代碼片段：要麼將它放在HTML的最後（即在</body>之前），要麼觸發它window.onload。

對於正在運行的例子，在這裏看到：
http://jsfiddle.net/z7V7d/2/

編輯：其實，我不喜歡爲別人做功課;但我很開心，所以我猜這沒關係。我根據你的意願更新了代碼。 ;）

來源

2011-09-30 18:05:58 anroesti

非常感謝。這是非常正確的。然而，有沒有一種方法可以讓這個動畫顯示溢出的文本只發生在比容器更長的鏈接上，而不是每一個鏈接？......如果這是有道理的。如果沒有，那很好。非常感謝這種快速響應。 – carrako

此外，動畫只能在鼠標懸停時發生，並且在光標離開時立即停止並返回到其原始位置？ – carrako

再次感謝。這正是我所期待的。我做了一些研究，並在提出後續問題之前進行了一些研究，並讓它在某種程度上起作用，但它相當凌亂，並不像您的新代碼那樣簡短和乾淨。非常感謝。 – carrako

當文字溢出時長度超過容器並在滾動時滾動

回答

相關問題