具有最小可能宽度的全高度内容

Question

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

我正在使用类似于这样的东西：

<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解决方案。

- Wesley Murch

---

那么，如果有更多的内容，你的文本容器就会变得更宽吗？ - Stphane

正确。文本应填充容器并具有尽可能少的宽度，同时保持全高。 - Wesley Murch

相关链接：https://dev59.com/2mHVa4cB1Zd3GeqPrvG6 - Milche Patern

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

我已经对您的CSS作出了一些修改：

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

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

- Terry

---

看起来是个很好的解决方案，我现在正试图将其插入到我的项目中，但失败了。编辑：啊，我忘记先设置 width: 1px; 了。最终我选择了10像素间隔（足够好）。非常好的、小巧、易用的解决方案。 - Wesley Murch

使用.outerHeight(true)来获取完整的高度（包括填充和边距）。 - Pavlo

@PavloMykhalov 这是真的，但我通常避免在这种情况下使用边距，因为边距折叠的变化会使计算变得复杂。 - Terry

太棒了，谢谢！我喜欢不必猜测宽度，并且它可以很好地适应不同的字体大小和内容（客户可以编辑文本）。不过，由于我需要支持一些不知道 box-sizing 的浏览器（你猜是哪些），所以最终还是采用了原始的 CSS。 - Wesley Murch

Answer 2

使用JavaScript完成这个任务并不太难。我不知道是否有没有JS的解决方案。

你可以使用另一个“不可见”的div来测量尺寸，直到其高度达到320像素，同时通过一定数量的缩小宽度（甚至每次1像素，如果您想尽可能精确）。

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/

- Explosion Pills

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/

- jcubic

---

似乎没有做任何事情。也许演示中缺少了一些东西。 - Wesley Murch

@WesleyMurch 您需要点击以将文本更改为随机长度字符串。 - jcubic

啊，我的错误，看起来很好！只需要微调一下：self.height(height+60)。 - Wesley Murch

Answer 4

你可以使用jQuery / JavaScript并检查客户端与滚动高度，使宽度增加到适合文本的大小，类似于以下内容。

您还需要在CSS中对

标签设置overflow: hidden;，以便scrollHeight为您提供包括溢出在内的实际高度。

下面的代码还考虑了边距和填充的高度和宽度，并进行相应调整。

更改外部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");
        }
    }
});

---

演示 - 让宽度增长，直到文本完全可见

---

- Nope

---

@WesleyMurch：当然你不需要jQuery，但它可以更轻松地动态获取填充/边距。否则这是一个动态解决方案。50的最小宽度仅用于演示。当然，您可以扩展此解决方案，以包括clientWidth`scrollWidth`检查，以确保最小宽度也得到了覆盖。仍然非常动态。 - Nope

好的解决方案。我选择了较短的那个。抱歉回复晚了，我需要测试所有这些答案（没想到会有这么多）。它们几乎都是相同的方法。 - Wesley Murch

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

- Ali Bassam

---

这似乎导致浏览器崩溃了，也许是我做错了什么。 - Wesley Murch