8

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

我正在处理这样的事情：

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

4

5 回答 5

3

我想到的是一个简单的 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;
}
于 2013-03-05T15:29:26.153 回答
1

这对 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/

于 2013-03-05T15:29:24.797 回答
1

试试这个：

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/

于 2013-03-05T15:40:43.400 回答
1

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

您还需要在标签overflow: hidden;上的 CSS 中进行设置，以便为您提供包括溢出在内的实际高度。pscrollHeight

下面的代码还同时考虑了边距和填充；高度和宽度并相应调整。

相应地更改外部 div ajdust 的高度。

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

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

于 2013-03-05T15:44:42.877 回答
0

我们可以给段落一个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";
    }
}
于 2013-03-05T15:44:36.580 回答