全高内容和尽可能最小的宽度

我从来不认为这是可能的，但这里有很多聪明的人，所以我想我会问。我正在寻找一种方法来拥有一个全高容器，其宽度取决于内容的多少。我希望文本填充占据整个高度的区域，同时使用尽可能小的宽度。高度是已知的并且是硬编码的，但内容的数量却不是。

我正在与像这样的东西:

<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled....</p>
</div>

div {
    background:red url(http://lorempixel.com/600/400/);
    float:left;
    width:600px;
    height:400px;
}
p {
    background:#fff;
    padding:20px;
    margin:20px;
}

通常内容从上到下填充页面：

我正在寻找的是相反的，从左到右填充：

内容较少的话，应该是这样的：

使用完整的硬编码高度width:auto产生这样的效果：

有没有办法让文本以尽可能小的宽度填充高度，而无需对宽度进行硬编码或使文本溢出？这似乎不可能，我不知道如何处理它。欢迎使用 Javascript/jQuery 解决方案。

我想到的是一个简单的 jQuery 解决方案：在 while 循环中，设置条件，以便每当高度超过容器高度时就运行循环。在循环中，您增加了宽度<p>逐像素直到高度不再超过容器高度:)

$(document).ready(function() {
    // The 400-80 is because you have to subtract the container padding and the element's own padding
    while($("div > p").height() > 400 - 80) {
        currentWidth = $("div > p").width();
        $("div > p").width(currentWidth + 1);    
    }
});

http://jsfiddle.net/teddyrised/RwczR/4/

我也对你的 CSS 做了一些更改：

div {
    background:red url(http://lorempixel.com/600/400/);
    float:left;
    overflow: hidden;
    width:600px;
    height:400px;
    padding: 20px;
    box-sizing: border-box;
}
p {
    background:#fff;
    padding: 20px;
    width: 1px;
}