文本溢出并在下面给我一个滚动条 - text overflowing and gives me a scroll bar under

text overflowing and gives me a scroll bar under

我有一个问题：我已经用PHP创建了一个简单的聊天框，我的消息保存在我的数据库中，但每当我键入一个非常长的文本，PHP将其返回到我的页面时，我的页面就会创建一个很长的滚动条来显示所有文本。我一直想的是，当我键入一个很长的文本时，它会自动下降，不会创建滚动条。

我想给你看我聊天室的屏幕截图。

我已经尝试更改widths、heights和nowrap，但仍然没有成功。

这是shoutbox.php，其中包含shouts.php：

<?php
mysql_connect("localhost","root","");
mysql_select_db('try');
$submit=isset($_POST['sub']);
if ($submit)
{
    $message=$_POST['message'];
    mysql_select_db('try');
    $queryreg=mysql_query("INSERT INTO message(ID,message) VALUES('','$message')") or die (mysql_error());
}
?>
<html>
<head>
    <meta http-equiv="content-type" content="html/text"/>
    <style type="text/css">
        body
        {
            font-family:Tahoma;
            font-size:10pt;
            background-image:url(dota2background.jpg);
            -moz-background-size: cover;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: top center !important;
            background-repeat: no-repeat !important;
            background-attachment: fixed;
        }
        #shouts
        {
            border:1px solid #000;
            width:1248px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <form action="shoutbox.php" method="post">
        <table border="1" width="1248" style="border:0;" cellpadding="5">
        <tr>
        <td><br/>Message:<textarea cols="50" rows="2" name="message" style="resize:none;"></textarea><input type="submit" name="sub" value="send">
        </tr>
        <tr>
            <td width="1024px"><div id="shouts">
                <iframe name="shouts" src="shouts.php" width="1248px" height="720px" frameborder="0" scrolling="auto"></iframe>
                </div>
        </tr>
        </table>
        <b>
    </form>
</body>
</html>

这是shouts.php：

<?php
mysql_connect("localhost","root","");
mysql_select_db('try');
$submit=isset($_POST['sub']);
if ($submit)
{
    $message=$_POST['message'];
    mysql_select_db('try');
    $queryreg=mysql_query("INSERT INTO message(ID,message) VALUES('','$message')") or die (mysql_error());
}
?>
<html>
<head>
    <meta http-equiv="content-type" content="html/text"/>
    <style type="text/css">
        body
        {
            font-family:Tahoma;
            font-size:10pt;
            background-image:url(dota2background.jpg);
            -moz-background-size: cover;
            -webkit-background-size: cover;
            background-size: cover;
            background-position: top center !important;
            background-repeat: no-repeat !important;
            background-attachment: fixed;
        }
        #shouts
        {
            border:1px solid #000;
            width:1248px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <form action="shoutbox.php" method="post">
        <table border="1" width="1248" style="border:0;" cellpadding="5">
        <tr>
        <td><br/>Message:<textarea cols="50" rows="2" name="message" style="resize:none;"></textarea><input type="submit" name="sub" value="send">
        </tr>
        <tr>
            <td width="1024px"><div id="shouts">
                <iframe name="shouts" src="shouts.php" width="1248px" height="720px" frameborder="0" scrolling="auto"></iframe>
                </div>
        </tr>
        </table>
        <b>
    </form>
</body>
</html>

在显示消息的地方添加2行css

.messages {
   float:  left;
   clear: left;
}
table{
   word-wrap: break-word;
}

检查小提琴：http://jsfiddle.net/r0wcn3b1/