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

Question

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

我与something like this工作：

<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产生这样的效果：

有什么以尽可能小的宽度填充文本的高度，而不用硬编码宽度或使用tex T溢出？这似乎是不可能的，我不知道如何处理它。 JavaScript/jQuery解决方案欢迎。

Answer 1

我心目中是一个简单的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; 
} 

Answer 2

这不是也难以用JavaScript做。我不知道如何在没有JS的情况下做到这一点（如果甚至可能的话）。

您可以使用另一个“不可见”div来测量尺寸，直到它达到320像素的高度，同时将其减少一定数量（如果希望尽可能精确，则一次只能放置一个像素）。

var $measurer = $("<div>").css({'position': 'fixed', 'top': '100%'}) 
    .text($("p").text()).appendTo('body'); 

var escape = 0; 
while ($measurer.height() < 320) { 
    console.log($measurer.height()); 
    $measurer.width(function (_, width) { return width - 1; }); 
    console.log($measurer.width()); 
    escape++; 
    if (escape > 2000) { 
     break; 
    } 
} 
$("p").width($measurer.width()); 
$measurer.remove(); 

http://jsfiddle.net/RwczR/2/

Answer 3

试试这个：

var p = $('p'); 
var height = parseInt(p.height())-40; 
p.height('auto'); 
p.width('auto'); 
for(var i=p.width(); i--;) { 
    p.width(i); 
    if (p.height() > height) { 
     p.height(height+20); 
     p.width(i-1); 
     break; 
    } 
} 
p.height(height); 

http://jsfiddle.net/RwczR/6/

Answer 4

我们可以给段落overflow:auto;。

如果段落需要一个垂直滚动条，它会创建一个。

诀窍是继续收紧宽度，直到创建滚动条。

var hasScrollBar = false; 
var p = document.getElementById('myParagraph'); 
while(!hasScrollBar) 
{ 
    if(p.scrollHeight>p.clientHeight) 
    { 
     //Has Scroll Bar 
     //Re-Increase Width by 1 Pixel 
     hasScrollBar=true; 
     p.style.width=(p.clientWidth+1)+"px"; 
    } 
    else 
    { 
     //Still no Scroll Bar 
     //Decrease Width 
     p.style.width=(p.clientWidth-1)+"px"; 
    } 
} 

Answer 5

您可以使用jQuery/JavaScript和检查客户端VS滚动高度不断增加的宽度，直到它符合文本，类似于下面。

您还需要在p的p标记的CSS中设置overflow: hidden;以给出包括溢出在内的实际高度。

下面的代码也考虑到了margin和padding;高度和宽度并据此调整。

相应地更改外部格子的高度。

$(document).ready(function(){ 
    var $container = $("div"); 
    var containerHeight = $container.height(); 
    var containerWidth = $container.width(); 

    var $textWrapper = $(">p", $container); 

    var paddingMarginHeight = $textWrapper.outerHeight(true) - $textWrapper.innerHeight(); 
    var paddingMarginWidth = $textWrapper.outerWidth(true) - $textWrapper.innerWidth(); 

    $textWrapper.innerHeight(containerHeight - paddingMarginHeight); 

    //SetMinWidth(); 
    var maxWidth = containerWidth - paddingMarginWidth; 
    var visibleHeight = 0; 
    var actualHeight = 0; 

    for(i = 50; i <= maxWidth; i++){ 
     $textWrapper.innerWidth(i); 

     visibleHeight = $textWrapper[0].clientHeight; 
     actualHeight = $textWrapper[0].scrollHeight; 

     if(visibleHeight >= actualHeight){ 
      break; 
      console.log("ouyt"); 
     } 
    } 
}); 

---

DEMO - 种植宽度直到文本是完全可见

---