具有最小可能宽度的全高度内容 [英] Full height content with the smallest possible width

问题描述

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

我正在使用

我也对CSS进行了一些修改： / p>

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

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 how much content there is. I want the text to fill the area taking up the full height while using the smallest possible width. The height is known and hard-coded, the amount of content is not.

I'm working with 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;
}

Normally content fills the page from top to bottom:

What I'm looking for is sort of the opposite, filling in left-to-right:

With less content, it should look like this:

Using full hard-coded height with width:auto produces this effect:

Is there any way to have the text fill the height with the smallest possible width, without hard-coding a width or having text overflow? It seems impossible and I have no idea how to approach it. Javascript/jQuery solutions welcome.

解决方案

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

这篇关于具有最小可能宽度的全高度内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！