水平滚动div没有空格

时间:2014-01-06 17:44:14

标签: css html overflow

是否可以在内部使用固定宽度,固定高度和大量文本的div元素水平滚动?

我认为显而易见的答案是“是”,但我不完全确定如何。

一个解决方案(我不满意的一个解决方案)是将文本包装在一个非常宽的div中,因此强制父元素水平滚动。 (我说“强制”,因为它本质上是垂直滚动的。)然而,问题是当你一直向右滚动时,会有空的空间。

当然,你可以找到文本的确切长度并将其调整到完美,但我不能处于可能的位置。文本(实际上是很多inline-block div元素,但我不想让你进一步混淆)长度从一分钟到下一分钟不等。

这是所说的解决方案(右侧有额外空间的解决方案):

<!DOCTYPE html>
<html>
<body>

    <div style="overflow-x:scroll;">
        <!-- the approximate width of the following text = 5000px -->
        <div style="width:5000px;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper egestas diam non pretium. Suspendisse tristique, metus quis rhoncus fringilla, elit enim placerat neque, et faucibus purus lacus ac ligula. Mauris purus enim, scelerisque non magna in, euismod bibendum mauris. Integer leo magna, convallis quis nisi vitae, sollicitudin rutrum eros. Aenean fermentum cursus rhoncus. Etiam tempor vel sapien nec venenatis. Phasellus risus massa, vulputate in magna eu, viverra pellentesque magna. Aenean a ipsum a dolor tempor rhoncus eget sit amet sapien. Nunc dui felis, iaculis pulvinar erat eu, eleifend elementum lectus. Suspendisse aliquam condimentum nibh ut luctus. Aenean imperdiet aliquet sollicitudin.
        </div>

    </div>

</body>
</html>

JSFiddle:http://jsfiddle.net/9AH3k/

(具有讽刺意味的是,这个代码框正是我正在寻找的,但它是如何制作的?

2 个答案:

答案 0 :(得分:3)

当然,您需要做的就是使用white-space: nowrap;

基本上,这会将元素的文本设置为不换行到新行,这会导致容器被推出到文本内容的宽度。通过这种方式,您可以摆脱巨大的宽度设置,并自动调整大小。

参见示例:

http://jsfiddle.net/YD4z2/

答案 1 :(得分:2)

http://jsfiddle.net/Eu2Vh/1/

您只需使用<pre></pre>代码而不是<div> </div>

<pre>
           akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf    akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf    akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
               akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
               akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
               akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
            akjsdfasd akjdkdj akjdakdf ajdskjad akj fdakjsd alksjf akldjf aksjf dalksjfd aksjfksjf d jdk akdj adjfdklajd akjdf kjdf akf 
</pre>

你问了

  

(具有讽刺意味的是,这个代码框正是我正在寻找的,但是   怎么做的?)

使用<pre></pre>标签制作。