私は実行しているウェブサイトにTwitterフィードを持っています。ただし、小さな画面では切り取られます。私は最新のつぶやきを持っている1行のテキストのために十分な高さのバーを持っています。長すぎると、ツイートが省略されたり、最後に消えたりします。しかし、ホバーでは、テキストを左にゆっくりとスライドさせ、隠れた部分を露出させます。CSS/JQueryは、ホバリングで横向きにスクロールします。
このエフェクトは、スクリーンよりも広いタイトルを持つ曲をハイライト表示するときに、iPod classicで使用されます。 （私はあなたが何をやっているのか理解してくれることを願っています）
私はこのようなことをどうやって実行するのか不思議です。テキストを強制的に1行にとどめることはできますか？
それを行うには、かなり簡単な方法だ上で左から右にスクロールアイテムを移動する.animate（）を使用することができます。あなたは、コンテンツのネイティブ、切り捨てられていない幅を決定した場合
div#container {
/* among other settings: see fiddle */
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
：あなたは自動的に切り捨てと省略記号を処理するために、いくつかのCSSを使用することができます
<div id="container">
Here is the long content, long long content. So long. Too long.
</div>
：まず、あなたの長いテキストを含むdiv要素を設定jQueryの.animate()を使用すると、実行時までテキストの長さがわからなくても（一定の速度で）コンテンツを移動することができます（twitterフィードの場合のように）。ここでは、測定を得るための、やや機械的な方法です：
var true_width = (function(){
var $tempobj = $('#container') // starting with truncated text div container
.clone().contents() // duplicate the text
.wrap('<div id="content"/>') // wrap it in a container
.parent().appendTo('body') // add this to the dom
.css('left','-1000px'); // but put it far off-screen
var result = $tempobj.width(); // measure it
$tempobj.remove(); // clean up
return result;
})();
最後に、いくつかのアニメーションは：
$('#container').one('mouseenter', function(){ // perhaps trigger once only
var shift_distance = true_width - $(this).width(); // how far to move
var time_normalized = parseInt(shift_distance/100, 10) * 1000; // speed
$(this).contents().wrap('<div id="content">').parent() // wrap in div
.animate({
left: -shift_distance,
right: 0
}, time_normalized, 'linear'); // and move the div within its "viewport"
});
にかかわらず、テキストの長さの、あなたは100あたり約1秒の一貫した速度を取得しますピクセル（必要に応じて調整）。マウス離脱のコンテンツをリセットまたは巻き戻すことは、練習として残されています。このアプローチはいくつかの単純なビットを持っていますが、あなたにいくつかのアイデアを与えるかもしれません。ここで
は、作業例を示します。最後http://jsfiddle.net/redler/zdvyj/
Steffen Rusitschkaはこれを行うためにjQueryスクリプトRUZEE.Ellipsisを作成しました。
あり、これを行うそこにいくつかのプラグイン（レミーシャープ：例えばhttp://remysharp.com/demo/marquee.html）がありますが、あなたがゼロから構築された場合：
持っているニーズをスクロールされている項目「ホワイトスペース：nowrap属性は、」 "position：absolute"（左右にスクロールできるようにする）と "overflow：hidden"を持つ相対的に配置された要素でラップします（表示する幅だけのように見せます） 。
のjQueryを使用して、ホバーイベントここ
、ここに私のエントリです：http://jsfiddle.net/sdleihssirhc/AYYQe/3/
クールなもの：
text-overflow:ellipsisを使用します。非常にきちんとした例！ jqueryなしで！ – Purefan
これはとてもクールです:)共有ありがとう！ – BeesonBison
@sdleihssirhc：デモリンクがダウンしています。 – NewCod3r
あなたはバーをカスタマイズするために、結果をプレビューするコードジェネレータを使用しjRollingNews
に外観を与えることができます。
免責事項：私はそれを作った。
私の解決策はjsfiddleで、最後はCSS3アニメーションを使用しています。私はhereとhereからアイデアを借りました。私の考えはすなわちdiv.sが故に、それはこのように@keyframesルールでleftプロパティの割合の使用を可能にする、すべてのテキストを含めることができるように十分に広く成長して、コンテナdivをできるようにした。
.s {
display: inline-block;
}
.t:hover, .s:hover {
width: auto;
}
ここでは、コードです：
.t {
white-space: nowrap;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 100%;
}
.s {
display: inline-block;
width: 100%;
}
.t:hover, .s:hover {
width: auto;
}
.s:hover .t {
animation: scroll 15s;
}
.f {
width: 100px;
background: red;
overflow: hidden;
}
@keyframes scroll {
0% {left: 0px;}
100% {left: -100%;}
}<div class="f">
<div class="s">
<div class="t">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id impedit accusamus nulla facilis unde sed ipsum maiores adipisci, eius excepturi saepe perspiciatis sequi optio ipsam odio quibusdam quo libero repudiandae.
</div>
</div>
</div>
フィドル:)に感謝し、素晴らしいが正しくありません弔辞 – Purefan