Force paragraph to use the maximum height available

I have a series of divs which contain a small paragraph of text. I would like to make all the divs of the same height and vary the width as required to fit the paragraph.

If I was to do this in the vertical direction I would just set the width of the div. But if I set the height the paragraph turns into one line making the box as wide as possible.

How to I force the paragraph to have as many lines as the height will allow then increase in width as required

I have tried using min-height:100px for the paragraphs but the left over height is filled with white space and the text is still on one line.

Here is an example off what I am trying to do. As you can see the text is staying on one line. I would like to make it file the box vertically before making the box wider.

jsfiddle link: http://jsfiddle.net/Kj49B/

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul class="container">
    <li class="item">
        <a href="" class="title"  target="_blank">Title 1</a>
        <br/>
        <p>A summit aimed at reducing the risk of nuclear terrorism and involving some 50 countries is about to open in South Korea's capital, Seoul</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title</a>
        <br/>
        <p>Watch the latest news summary from BBC World News. International news updated 24 hours a day</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A much much longer title</a>
        <br/>
        <p><img src="http://www.montrealgazette.com/6355281.bin" align="left"/>Freshly crowned NDP leader Thomas Mulcair has vowed to make Prime Minister Stephen Harper's Tories his main adversary and he moved quickly to assure his own party that there won't be a housecleaning of staff</p>
    </li>
    <li class="item">
        <a href="" class="title"  target="_blank">A long title that goes on and on until it is very very long</a>
        <br/>
        <p>Pope Benedict XVI condemns drug-trafficking and corruption at a huge open-air Mass in central Mexico as part of his first visit to the country</p>
    </li>       
</ul>
</body>
</html>

Here is the CSS that goes with it:

body
{
    font-family:sans-serif;
}

.container
{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    height:180px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/

    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    min-height:80px;
    line-height:1.2;
    word-wrap:true;
}

You can't using CSS. There is nothing I've ever come across even in CSS3 that supports this natively. What you're asking for is that width:auto act like height:auto but it won't because auto height is based on the concept of line boxes and there is no such thing as a "column box" (because text isn't a grid).

Tables with fixed height cells are the closest you'll get but you say in the comment above they don't suit you for other reasons. Even then you'll find the behaviour isn't particularly consistent or easy to control.

You can do this using javascript by detecting boxes that exceed a certain height then progressively making them wider until they don't. If javascript isn't an option either then I believe you are out of options.

Hi you just have to give the width & height auto in your css that will work fine according to your requirement.

see your updated css :-

body
{
    font-family:sans-serif;
}

.container
{
    width:auto;
    margin-left:auto;
    margin-right:auto;
    align:center;
}

.item
{
    margin-left:auto;
    margin-right:auto;
    display:inline-block;
    color:#000033;
    font-size:14px;
    line-style:none;
    float:left;
    margin:20px;
    padding:20px;
    height:auto;
    vertical-align:middle;
    border:1px solid #000033;
    border-radius: 50px; /*w3c border radius*/
    -webkit-border-radius: 50px; /* webkit border radius */
    -moz-border-radius: 50px; /* mozilla border radius */
}

.title
{
    color:#000033;
    text-decoration:none;
    font-size:22px;
    margin:0px;
    padding:0px
    line-height:1;
}

img
{
    height:90px;
    margin: 5px;
}

p
{
    display:block;
    margin:5px;
    width:minimum;
    padding:0px;
    line-height:1.2;
    word-wrap:true;
    height:auto;
}

OR See the fiddle:- http://jsfiddle.net/Kj49B/7/

You should have this:

div {max-height:100px;}
p {height:100%;}

Leave the width unspecified. Of course, you could easily replace div and p with ids or classes if you wanted to.

My answer may not be valid since I saw your code sample after I posted this answer. I'll leave this up here in case it may be of some help.

来源：https://stackoverflow.com/questions/9864123/force-paragraph-to-use-the-maximum-height-available

标签

html

css

paragraph