水平滚动未知宽度的内容

Question

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

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

white-space: nowrap;，在实践中感觉有点hacky。运行我附上的代码片段，您就会明白我的意思；背景没有延伸到文本的边缘，因为文本溢出了它的预期边界。
设置一个宽度，它可以让文本按照我的意愿行事，但当我不知道内容中包含什么文本时它不起作用 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>

水平滚动未知宽度的内容

Horizontal scrolling of content of unknown width

html

css