CODEWITHSUNDEEP
htmlcss
user311509
user311509

Reputation: 2866

Break One Long Text into Two Lines

<div id="posted_wrap">
    <div id="posted_middle">
        <div id="posted_top"></div>
        <div id="textcontent">
            <br /><p>ARTICLE</p>
        </div>
        <br />
             <div id="posted_bottom"></div>
    </div>

</div>

The above div product the following UI:

enter image description here

The long text you see represents the article.

Problem 1: I need to let this long text moves automatically into the new line. Example:

enter image description here

Problem 2: How can i set a specific fixed minimum height e.g. 300px , so if a user enters few lines, the article box doesn't look too short.

CSS Details - This is my first project, not familiar with web-design: posted_wrap { position: relative; padding: 0px; margin-right: 55px; margin-top: 25px; }

textcontent {   
    margin-right: 25px;
}

    textcontent p { 
             margin:0 auto;
             text-align:center;
             width: 663px;
    }

posted_top {
    width:688px;
    height: 9px;
    margin: 10px 0 0 0;
    margin-right: 0px;
    background: url(images/postedcontent_top.png) no-repeat center top;
}

posted_middle {
    width:688px;
    background: url(images/postedcontent_middle.png) repeat-y center center;
}

posted_bottom{
    width:688px;
    height: 44px;
    background: url(images/postedcontent_bottom.png) no-repeat center bottom;
}

Upvotes: 0

Views: 9055

Answers (2)

Zhianc
Zhianc

Reputation: 1451

set a width:

textcontent p {
width:640px
}

and use min-height for problem 2

EDIT: Your words shouldn't be too looooooooooooooooooooooong. Generate random texts instead of a long aaaaaaaaa.

Upvotes: 2

dnuttle
dnuttle

Reputation: 3840

If a div has a style that specifies a width, then the content within it will break automatically. (This is assuming no overflow property has been set.)

For height, you want the min-height property. But be sure to read sitepoint's description of this; there are caveats and it is buggy in IE 6.

Upvotes: 0

Related Questions