239일차(모험 148일차) - 채팅 페이지

박스 밖으로 글씨가 넘어가는 현상 (오른쪽, 하단) 

 

 

 

아래 코드 작성

(but 박스 안에 메세지가 가득 차면 더 이상 추가가 되지 않는 문제 해결 필요)

overflow: hidden;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

 

---

 

겹치는 현상

 

a가 길게 적고 b가 짧게 적으면 겹쳐지는 현상 발생

 

 

 

현재 메세지를 넣는 방법이 메세지를 입력할 때 마다 div로 띄워진다.

let newMsg = document.createElement('div');

 

class를 넣어서 겹치지 않게 작성했다.

newMsg.className = "chat-msg";

출처 : [JavaScript] class가 있는 docment.createElement()를 사용하기

 

 

 

css 코드 작성

.chat-msg {
    display: inline-block;
    width: 400px;
    white-space: normal;
}

 

 

 

이 전에 작성했던 박스 밖으로 글씨가 넘어가는 현상 css 코드는 다시 이전코드로 변경

(위 css 코드에서 가로를 지정해줬기 때문에 오른쪽 박스 바깥으로는 넘어가는 일 없음)

.msgArea {
    margin: 25px 0 0 126.5px;
    width: 720px;
    height: 650px;
    border: 5px solid rgba(175, 209, 250, 0.78);
/*    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
}

 

 

---

메세지 입력 칸 초기화 

$(".content").val('')

2021.09.14 - [TIL] - 2일차(2주차_초기화 기능 추가)

 

 

---

 

자동으로 커서 띄워주기

autofocue 속성 이용

<input type="text" placeholder="보낼 메세지를 입력하세요." class="content" autofocus>

출처 : [html] HTML 페이지 로딩시 <input>에 커서 자동으로 가기