Line break (Wrap) Text in DIV for defined width using CSS

Last Reply 10 months ago By anvina

Posted 10 months ago

Max-width 80% results in horizontal scrollbar if content too big for window.

I want the text to come to next line if it does not fit 80% of a small window. but i get scrollbar instead.

<!DOCTYPE html>
<html>
<head>
<style>
body{
    height: 98.5%;
    margin: 0;
}
</style>
</head>
<body>
    <table id="tblChat" style="width: 100%; height: 100%; margin: 0;" cellspacing="0" cellpadding="0">
        <tr style="height: 85%; background-color: #fafaf7; border: solid 1px lightgray; border-bottom: none;">
            <td style="vertical-align: top; height: 100%;">                                    
            <div id="divCommLog">
                <div style="max-width:80%;border:1px solid red;">hfghfghfghfghfghfghfghfhfghfghfghfghfghfghfghfghgfghfhfghfghfghfghfghfghfghfghgfghfhfghfghfghfghfghfghfghfghgfghfhfghfghfghfghfghfghfghfghgfghfghgfghfgh</div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
Posted 10 months ago Modified on 10 months ago

Hi anvina,

Add word-wrap:break-word; to break the word in next line.

HTML

<style type="text/css">
    body
    {
        height: 98.5%;
        margin: 0;
    }
</style>
<div>
    <table id="tblChat" style="width: 100%; height: 100%; margin: 0; table-layout: fixed;"
        cellspacing="0" cellpadding="0">
        <tr style="height: 85%; background-color: #fafaf7; border: solid 1px lightgray; border-bottom: none;">
            <td style="vertical-align: top; height: 100%;">
                <div id="divCommLog">
                    <div style="word-wrap: break-word; max-width: 80%; border: 1px solid red;">
                        hfghfghfghfghfghfghfghfhfghfghfghfghfghfghfghfghgfghfhfghfghfghfghfghfghfghfghgfghfhfghfghfghfghfghfghfghfghgfghfhfghfghfghfghfghfghfghfghgfghfghgfghfgh</div>
                </div>
            </td>
        </tr>
    </table>
</div>

Demo


Posted 10 months ago Modified on 10 months ago

I cant do that... what i have sent you is a sample .. the actual structure is very big with a lot of controls in the table....

If i use table-layout : fixed it solves my issue.....