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

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

我正在使用这样的东西 ：

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

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

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

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

内容较少，应该如下所示：

使用带有width:auto完整硬编码高度width:auto会产生此效果：

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

Answer 1

我想到的是一个简单的jQuery解决方案：在while循环中，设置条件，以便每当高度超过容器高度时运行循环。 在循环中，您逐个像素地增加

的宽度，直到高度不再超过容器高度:)

 $(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来测量尺寸，直到达到320px高度，同时将其减少一定量（如果您想要尽可能精确，则一次减少1个像素）。

 var $measurer = $("
").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

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

你还需要设置overflow: hidden; 在scrollHeight的p标签上的CSS中给出包括溢出在内的实际高度。

以下代码还考虑了两者的边距和填充; 高度和宽度并相应调整。

相应地改变外部div的高度。

 $(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"); } } }); 

---

演示 – 增加宽度，直到文本完全可见

---

Answer 5

我们可以给段落一个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"; } }