html - 水平滚动未知宽度的内容

Question

假设我有一个显示一长行文本的内容 div。我希望内容包含在具有固定高度的包装 div 中，如果内容长于包装 div 的宽度，则可以选择水平滚动。

据我所知，我想做的解决方案有两种:

1. white-space: nowrap;，在实践中感觉有点 hacky。运行我附上的代码片段，您就会明白我的意思；背景没有延伸到文本的边缘，因为文本溢出了它的预期边界。
2. 设置一个宽度，它可以让文本按照我的意愿行事，但当我不知道内容 div 中的文本是什么时，它就不起作用了。无论如何，这不是垂直滚动的工作方式；我不需要猜测我需要多少总高度(或设置高得离谱的高度)来激活垂直滚动。

我主要寻找的是一种让浏览器水平执行它已经垂直执行的操作的方法。如果这不可能(我认为不可能)，是否有比我探索过的两个更好的解决方案？

.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;
}

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

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>