如何根据DIV的宽度自动滚动div中的文本

Question

我有固定宽度的div。如果div的内容大于div的宽度，我想自动滚动（左和右：水平方向）文本。我该怎么做呢？css或jquery。当前div具有这样的类。 。

       .divcon{
margin:0px;
padding:0px;
height:30px;
width:143px;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
float:left;

}

我不需要任何滚动条..我想要像选框一样的功能

Answer 1

一种简单的方法是在CSS类中添加溢出：

overflow: scroll;

这将使div在水平和垂直方向均可滚动。

如果只想向一个方向滚动，则应尝试：

overflow-y:scroll; // For vertical scroll bar

和

overflow-x:scroll; // For horizontal scroll bar

Answer 2

你可以有这样的

用于水平滚动

溢出-x：滚动;

用于垂直滚动

溢出-y：滚动;

用于在两侧溢出时进行滚动：

从上面的CSS默认滚动会来，它不会取决于内容的大小

要使其取决于内容大小，请滚动->自动

Answer 3

加

overflow: auto; /* scroll bars appear, only when they are needed */

要么

overflow: scroll; /* scroll bars appear (both horizontal and vertical, even when not needed */

还有其他编码溢出的方法，尤其是当您希望显示特定的滚动条时。 但是，较旧的浏览器（IE8和更早版本）并未广泛支持这些功能。

overflow-x: scroll; /* only horizontal scroll bar */
overflow-y: scroll; /* only vertical scroll bar */

Answer 4

这是静态文本的代码，您需要根据div中的文本指定宽度：

CSS：

.divcon-outer{
width:143px;

}
.divcon{
margin:0px;
padding:0px;
max-height:45px;
width:auto;
font:bold 9px Verdana, Geneva, sans-serif;
line-height:30px;
color:#000;
background-image:url(../images/glass_bg.png);
background-repeat:repeat-x;
display:block;
overflow-x: auto;
overflow-y: hidden;

}
.divcon p{
min-width:200px;
max-width:50000px;
margin:0;
padding:0;
}

HTML：

<div class="divcon-outer">
<div class="divcon"><p>I have div with fixed width.I want to auto scroll(lefta nd right:Hirizontal direction) the text if content of div is more than div width.How can i do this thought css or jquery.Currently div has a class like this..</p></div></div>

Answer 5

这是一个示例，该示例使用严格的CSS在宽度固定的区域进行水平自动滚动。 没有使用或渲染滚动条。 这里需要注意的几件事：

• 您的问题有点模棱两可。 当您说要自动滚动时，是否表示要在将内容添加到div时滚动内容？ 您是说要它反复滚动相同的文本吗？ 还是别的？ 我在这里假设您正在请求第一个选项。

• 此处的滚动不使用JavaScript，但当然需要一些脚本来填充要滚动的div。

• 我仅在Firefox和Chrome中对此进行了测试。

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> #scrollbox{ display: inline-block; width: 16em; overflow: hidden; border: 1px solid #F00; } #scrollcontent{ float:right; white-space: nowrap; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> var idx = 0; $(document).ready(function(){ setInterval(function(){ idx++; $('#scrollcontent').append('foo_' + idx + " "); }, 200); }) </script> </head> <body> <span id="scrollbox"> <span id="scrollcontent"></span> </span> </body> </html> 

只要您向div中添加文本，并且只希望在添加文本时向右滚动，效果就很好。 如果要使其自动左右滚动，则需要JavaScript自动将“ #scrollcontent”的位置曲折。 您需要一种算法来获取父跨度的宽度（在这种情况下为“ #scrollbox”），从子跨度的宽度中减去该宽度（“ #scrollcontent”），并在零和该减法结果之间振荡一个数字。 子跨度的x位置将设置为该数字的负数。 请注意，您需要给“ scrollcontent”一个绝对位置，然后删除float：right属性。 您还需要为“ scrollbox”指定position属性，否则scrollcontent的绝对位置将相对于确实明确定义了位置的下一个父对象，而不是scrollbox本身。