スクロールバーを表示せずにdiv内のスクロール可能なテキスト行

plzは以下のリンクを参照してください:

Long File Name Inside A Div

when you see those long file names with firebug you will find a span that tell us ->

.FileName {
    float: left;
    width: 438px;
}

このスパンの幅はあらかじめ定義されています。

q#1:だから私たちはその部門でオーバーフローしているのですが、どうすれば修正できるのでしょうか?

q#2(重要):スクロールバーを表示せずにそのファイル名をスクロール可能にすることは可能ですか?

edit
(with jQuery or JavaScript or css)

前もって感謝します

0

3 答え

このテキストは壊れないのでスペースがないためオーバーフローしています:

R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210

スパンをdivに変更し、それらに高さとオーバーフローを与えることができます:hidden。

Html:

<div class="FileName">R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210  asangsm.com.rar</div>

CSS:

.FileName{
    float: left;
    width: 438px;
    height: 20px;
    overflow: hidden;
}

スクロールバーを表示せずにそのファイル名をスクロール可能にすることはできないと思います。

3
追加された
ありがとうございました/答えてくれてありがとうございました... "私はそれが可能だとは思わない"しかし、私はウェブサイトでそれを見たと思う - そう、そのための方法があるはず!
追加された 著者 MoonLight,
スクロールバーについては何ができますか?私はちょうどそのスクロールバーなしでスクロール可能なテキストを強制したいとマウスだけでそれをスクロールすることができます!
追加された 著者 MoonLight,
親愛なるマチュー私はあなたのCSSをテストする/私たちは私のリンクにスクロールバーを持っていることはできません!非常に醜いでしょう!
追加された 著者 MoonLight,
また、私はオーバーフローをテストする:隠された - >まだ改行がある!どうして?
追加された 著者 MoonLight,
多分あなたは何かを作ることができました。あなたがマウスオーバーしてファイル名をつけると、ファイル名のテキストがdivにスクロールされますか?または、マウスオーバーするときに、ファイル名の全長で.FileName-divの上にdivが表示されますか?
追加された 著者 Mathieu,
高さを20ピクセルに設定し、スパンをdivに変更する必要があります。後でスクロールする問題を見てみましょう
追加された 著者 Mathieu,

あなたがスクロールバーを必要としないが、スクロールしたい場合は、最も明白な解決策は、いくつかのJavaScriptを使用することです。あなたがjqueryに入っているなら、ここにいくつかあります:

http://www.net-kit.com/jquery-custom-scrollbar-プラグイン/

私はそれらのうちの1つ(http://www.demo.creamama.fr/plugin-scrollbar/)を試し、テキストを含むdivを overflow:hidden; とスクロールバーを含むdivに設定しましたあなたの状況を模倣する display:none; まで、それは私にスクロールバーのないスクロール可能なdivを与えます。
しかし、私はUIの観点から、スクロールバーなしでスクロール可能なセクションを持つことは最善の考えではないと思います。あなたがスクロールできる、またはスクロールしていることを示す少なくとも何かが点灯するはずです(Mac OS Lionスクロールバーのように)。あなたは、小さなスクロールバーやインジケータを使って、これを実現するためにそこにあるjavascriptソリューションの1つをスタイルすることができます。

1
追加された
私はjsfiddleで何かを素早く叩きようとしましたが、それは容易に行かないのです。 jqueryソリューションの1つを実装しようとする可能性がある場合は、まだ正しく動作していないかどうかを調べてください。
追加された 著者 kasimir,
回答ありがとうございます/ jsfiddleでサンプルを表示してください。
追加された 著者 MoonLight,

CSS3のマーキーを使用していないと、簡単な解決策はありません。 Javascriptを使用する必要があります。

改行を避けるために、 white-space:nowrap を使用できます。

1
追加された
あなたの点をありがとう
追加された 著者 MoonLight,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript