CODEWITHSUNDEEP
htmlcss
user710502
user710502

Reputation: 11471

how to make the text in a div to not overflow its width

I have a DIV with the following css

.divTab
{
    width: 700px;
    height: 550px;
    overflow:scroll;
    font-size: small;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    word-wrap: break-word;
}

and the following html

  <div id="fragment-1">
        <div class="divTab">
            <pre>'.$my_name.'</pre>
            <pre>'.$my_servings.'</pre>
            <pre>'.$my_clients.'<pre>
            <pre>'.$my_description.'<pre>
        </div>
   </div>

So now my problem is that the text being brought by $my_description overflows the width and adds a scroll at the bottom, i do not want it to overflow its width but instead break into the next line if it reaches the divs width. How can I do that?

Thank you

Upvotes: 3

Views: 5727

Answers (3)

Olaf
Olaf

Reputation: 899

The idea behind a <pre> tag is that it is "preformatted text", displayed in a fixed width, and only conservating the layout you put in it manually. It hence expects you to do the layout yourself(say, add <br />'s. You can, as answered above, alter the functionality of the <pre>, or consider not using them and instead use, for example, a regular <div>.

Upvotes: 0

deviousdodo
deviousdodo

Reputation: 9172

Add this CSS:

pre {
    overflow-x: auto; /* Use horizontal scroller if needed */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space : normal;
}

Here's an example of it working: http://jsfiddle.net/cSa2C/

Upvotes: 8

Kevin Anthony Oppegaard Rose
Kevin Anthony Oppegaard Rose

Reputation: 1003

Remove overflow:scroll; from your code.

Upvotes: 0

Related Questions