как прокручиваемая текстовая строка внутри div без показа полос прокрутки

Question

PLZ см. Ссылку ниже:

Длинное имя файла внутри A Div

когда вы увидите эти длинные имена файлов с firebug, вы найдете диапазон, который говорит нам->

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

у нас есть предопределенная ширина для этого диапазона!

q # 1: так почему у нас переполнение в этом div и как я могу это исправить?

q # 2 (важно): возможно ли сделать это имя файла прокручиваемым без отображения полос прокрутки?

edit
(с jquery, javascript или css)

заранее спасибо

Answer 1

У вас переполнение, потому что этот текст не может быть разбит (нет пробелов):

R1DA029_APP_SW_1212_2395_GENERIC_KT_REDBROWNBLUE_CID52_49_DB3210

Вы могли бы изменить промежутки на div и дать им высоту и переполнение: скрыто.

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

Я не думаю, что это имя можно прокручивать без отображения полос прокрутки.

Answer 2

Если вам не нужна полоса прокрутки, но вы хотите прокрутить ее, то наиболее очевидным решением будет использование некоторого JavaScript. Если вы в JQuery, вот некоторые из них:

http://www.net -kit.com / JQuery-заказ ScrollBar-плагинов /

Я попробовал один из них (http://www.demo.creamama.fr/plugin-scrollbar/),, установив div с текстом overflow: hidden; и div с полосой прокрутки на display: none;, чтобы имитировать вашу ситуацию, и это дает мне прокручиваемый div без полосы прокрутки.
Тем не менее, я думаю, что с точки зрения пользовательского интерфейса это не лучшая идея иметь прокручиваемый раздел без полосы прокрутки. По крайней мере, что-то должно загореться (как с полосами прокрутки Mac OS Lion), указывая, что вы можете или есть прокрутку. Чтобы это произошло, вы можете создать одно из решений javascript, например, с помощью крошечной полосы прокрутки или индикатора.

Answer 3

Если не использовать выделение CSS3 , я не вижу простого решения.Вы должны будете использовать Javascript.

Чтобы избежать разрыва строки, вы можете использовать white-space: nowrap;.