我有一个问题:我已经用PHP创建了一个简单的聊天框,我的消息保存在我的数据库中,但每当我键入一个非常长的文本,PHP将其返回到我的页面时,我的页面就会创建一个很长的滚动条来显示所有文本。我一直想的是,当我键入一个很长的文本时,它会自动下降,不会创建滚动条。
我想给你看我聊天室的屏幕截图。
我已经尝试更改width
s、height
s和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/