Discuter avec php et ajax avec la conception de bogue css

Question

Je travaille dans un nouveau projet, je fais la "partie de chat" un chat one-to-one .. avec php et ajax.

Je suis nouveau dans les choses css .. pendant que je testais le code, j'ai trouvé un problème: Le texte ne descend pas et continue de sauter le design, j'ai mis une image pour mieux comprendre.

Le code css:

.login_form { 
border: 1px solid #AAA; 
padding:10px; 
} 
h3 {margin-top:3px;} 
.chat_main { 
border:1px solid #AAA; 
-moz-box-shadow:0 0 10px #ccc; 
-webkit-box-shadow: 0 0 10px #ccc; 
width:350px; 
padding:10px; 
background:#f3f3f3; 
} 
.message { 
border:1px solid #AAA; 
margin:4px; 
padding:5px; 
-moz-border-radius:7px; 
-webkit-border-radius:7px; 
background:#ffffff; 
} 
.textf {-moz-box-shadow:0 0 10px #CCCCCC; 
-webkit-box-shadow:0 0 10px #CCCCCC; 
border:1px solid #CCCCCC; 
height:40px;} 
.submit { 
-moz-border-radius:7px; 
-webkit-border-radius:7px; 
background:#F3F3F3; 
border:1px solid #CCCCCC; 
font-size:16px; 
font-weight:bold; 
height:35px; 
margin-left:10px; 
padding:5px; 
} 
.message span { 
font-size:10px; 
color:#888; 
margin-left:10px; 
} 
.submit_form { 
margin:10px 0px; 
} 

Hope u peut me aider, je pense un design d'une manière d'erreur simple que je le sais parce que je suis ne pas nouveau dans des trucs de conception.

Answer 1

Utilisez des mots exacts au lieu de mots de spam comme aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa ce mot n'est pas la raison pour laquelle vous êtes confronté à ce problème.

Même si vous voulez utiliser comme cela, alors vous pouvez utiliser overflow-wrap: break-word;

Answer 2

Vous pouvez utiliser word-break:break-all; propriété ouword-wrap:break-word; propriété:

Par exemple:

div { 
 
    width: 200px; 
 
    border: 2px solid #CCC; 
 
    word-wrap: break-word; 
 
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>