Full Height Content With The Smallest Possible Width

I would never think this is possible, but there are a lot of clever people here so I thought I'd ask. I'm looking for a way to have a full-height container whose width depends on h

Solution 1:

What I have in mind is a simple jQuery solution: in a while loop, set the condition such that the loop is run whenever the height exceeds the container height. In the loop, you increase the width of <p> pixel by pixel until the height no longer exceeds container height :)

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

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

I have made some changes to your CSS, too:

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

Solution 2:

This is not too difficult to do with JavaScript. I have no idea how to do it without JS (if that's even possible).

You can use another "invisible" div to measure dimensions until it gets to the 320px height while reducing its with by a set amount (even 1 pixel at a time, if you want to be as precise as possible).

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

varescape = 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/

Solution 3:

Try this:

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/

Solution 4:

You can use jQuery/JavaScript and checking the client vs the scroll heights keep increasing the width until it fits the text, similar to the below.

You need to also set overflow: hidden; in the CSS on the p tag for the scrollHeight to give you the actual height including the overflow.

The below code also takes margin and padding into account for both; height and width and adjusts accordingly.

Changing the height of the outer div ajdust accordingly.

$(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 - Grow width until text is fully visible

---

Solution 5:

We can give the paragraph an overflow:auto;.

If the paragraph needs a vertical scroll bar, it will create one.

The trick is to keep tightening the width, until the scroll bar is created.

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