如何在div内部滚动文本行而不显示滚动条

Question

请参阅以下链接：

Long File Name Inside A Div

当你看到那些带有firebug的长文件名时，你会发现一个告诉我们的跨度 - ＆gt;

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

我们预定了此跨度的宽度！

q＃1：那么为什么我们在那个div中溢出了，我该如何解决这个问题呢？

q＃2（重要）：是否可以在不显示滚动条的情况下使该文件名可滚动？

修改
（使用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

如果不使用CSS3's marquee，我看不到简单的解决方案。你必须使用Javascript。

为了避免换行，您可以使用white-space: nowrap;。

Answer 3

如果你不想滚动条，但想滚动，那么最明显的解决方案就是使用一些javascript。如果你进入jquery，这里有一些：

http://www.net-kit.com/jquery-custom-scrollbar-plugins/

我尝试过其中一个（http://www.demo.creamama.fr/plugin-scrollbar/），将包含文本的div设置为overflow: hidden;，将包含滚动条的div设置为{{ 1}}模仿你的情况，这给了我一个没有滚动条的可滚动div 但是，我认为从UI的角度来看，没有滚动条的可滚动部分并不是最好的主意。至少应该点亮某些内容（与Mac OS Lion滚动条一样），表明您可以或正在滚动。您可以设置其中一个javascript解决方案来实现这一点，例如使用一个小滚动条或指示器。