버그 설계 CSS와 함께 php와 아약스와 채팅

Question

나는 새로운 프로젝트에서 일한다. 나는 "chat part"일대일 채팅을하고있다. php와 ajax를 사용하고있다.

코드를 테스트하는 동안 문제가 발견되었습니다. 텍스트가 아래로 이동하지 않고 디자인을 건너 뛰고 계속해서 더 나은 이해를위한 이미지를 넣었습니다.

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; 
} 

희망, 내가 키우면에게 내가 아는하지는 간단한 오류 디자인을 생각하는 디자인 물건의 새로운 미안 때문이다.

Answer 1

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa과 같은 스팸 단어 대신 정확한 단어를 사용하십시오. 왜이 문제에 직면하고있는 단어가 아닙니다. 당신은 당신이 word-break:break-all; 속성을 사용할 수 있습니다 다음 overflow-wrap: break-word;

Answer 2

을 사용할 수 있습니다 같이 사용하고자하는 경우에도

또는word-wrap:break-word; 특성 :

예를 들어

:

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

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>