文本溢出，并给我一个滚动条

-1

我有一个问题：我已经完成使用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>

来源

2015-02-07 Hooded warlock

不能帮助，除非你发布一些代码... – haxtbh 2015-02-07 17:35:30

完成先生..对不起，我忘了发布它。这是第一次.. – 2015-02-07 17:43:53

添加2行的CSS到你显示的邮件的地方

.messages { 
    float: left; 
    clear: left; 
} 

table{ 
    word-wrap: break-word; 
}

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

来源

2015-02-07 17:35:42

我试过这个先生。但它没有工作，它使每个评论的边界只是左转，但仍然是文字重叠..但感谢主席先生的帮助 – 2015-02-07 17:47:17

检查链接，它显示了一个例子 – 2015-02-07 17:47:39

@Hoodedwarlock你在呼喊显示值 – 2015-02-07 17:48:57

文本溢出，并给我一个滚动条

回答

相关问题