如何根據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本身。

如何根據DIV的寬度自動滾動div中的文本

問題描述

5 個解決方案

解決方案1
1 2013-05-23 04:47:47

解決方案2
0 2013-05-23 04:47:19

解決方案3
0 2013-05-23 04:47:47

解決方案4
0 2013-05-23 05:21:22

解決方案5
0 2013-10-07 01:30:43

如何根據DIV的寬度自動滾動div中的文本

問題描述

5 個解決方案

解決方案1 1 2013-05-23 04:47:47

解決方案2 0 2013-05-23 04:47:19

解決方案3 0 2013-05-23 04:47:47

解決方案4 0 2013-05-23 05:21:22

解決方案5 0 2013-10-07 01:30:43

解決方案1
1 2013-05-23 04:47:47

解決方案2
0 2013-05-23 04:47:19

解決方案3
0 2013-05-23 04:47:47

解決方案4
0 2013-05-23 05:21:22

解決方案5
0 2013-10-07 01:30:43