CODEWITHSUNDEEP
htmlcsswidth
René Houmran Griffin
René Houmran Griffin

Reputation: 173

How to limit div width?

I have a div inside a table that is overflowing the screen size. It looks like this:

<table id="hlavni" style=" position:absolute; border:none; position:relative; background-color:#FFC; border:#999 1px solid;" cellpadding="5">
    <tr>
        <td id="yamana" class="trida" valign="top" style="line-height:1.5em;">
            <div style="background-color:#FFC;" id=load_tweets>44444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444</div>
        </td>
    </tr>
</table>

How can I prevent it from overflowing?

Upvotes: 8

Views: 39644

Answers (3)

saraf
saraf

Reputation: 530

max-width and width -both- do not prevent the overflow if the text does not contain any spaces as in the example in the question. 

div {
    max-width : 300px;
    word-wrap: break-word;
}

see this fiddle for a solution.

For this case, the div must have the style "word-wrap: break-word" in order to work.

Or "overflow-wrap: break-word"

Upvotes: 5

Eray
Eray

Reputation: 7128

With max-width . Example : http://jsfiddle.net/YCV8H/

Upvotes: 4

esqew
esqew

Reputation: 44701

<html>
<head>
    <style type="text/css">
    #limit {
        max-width: 500px;
    }
    </style>
</head>
<body>
    <div id="limit">Your content goes here</div>
</body>
</html>

Upvotes: 10

Related Questions