Question

我们说我有一个内容div，显示一长串文字。我希望内容包含在具有固定高度的包装器div中，如果内容长于包装器div的宽度，则需要水平滚动选项。

我认为，我想要做两个解决方案：

white-space: nowrap;，在练习中感觉有些笨拙。运行我附上的片段，你就会明白我的意思;背景不会延伸到文本的边缘，因为文本溢出了预期的边界。
设置一个宽度，这样可以让文字做我想做的事情，但是当我不知道内容div中的文字是什么时，它就无法工作。这不是垂直滚动的工作原理;我不需要猜测我需要的整体高度（或设置一个可笑的高度）以激活垂直滚动。

我实际上正在寻找的是一种让浏览器水平完成垂直方式的方法。如果这是不可能的（而且我认为不是这样），有没有比我探索过的更好的解决方案？

＆＃13;

.wrapper {
    position: relative;
    background-color: green;
    width: 50%;
    overflow: auto;
    overflow-y: hidden;
    padding-bottom: 50px;
}
.content {
    background-color: rgba(255,255,255,0.25);
    white-space: nowrap;
}

＆＃13;

<div class="wrapper">
    <div class="content">
        one two three four five six seven eight nine ten eleven twelve thirteen
    </div>
</div>

＆＃13;

Answer 1

只需将display:inline-block添加到.content div

即可

http://jsfiddle.net/9f1y5q1r/

CSS

 .wrapper {
     position: relative;
     background-color: green;
     width: 50%;
     overflow: auto;
     overflow-y: hidden;
     padding-bottom: 50px;
 }
 .content {
     background-color: rgba(255, 255, 255, 0.25);
     white-space: nowrap;
     display:inline-block;
 }

HTML

<div class="wrapper">
    <div class="content">
        one two three four five six seven eight nine ten eleven twelve thirteen
    </div>
</div>

水平滚动未知宽度的内容

1 个答案: