text overflow 활용

DM 알림창을 만들고 있다.

알림창의 경우 화면의 크기가 작으므로 text overflow의 기능을 활용하기로 하였다.

메세지 알림 기능 구현만 한 상태. 텍스트의 길이가 길어지면 모두 보여주기 위해 많은 칸을 차지하게 되고 메세지가 많이 오면 리스트가 너무 길어질 것이다.

 

최대 2줄까지 보이다가 마우스를 hover하면 남은 메세지를 보이도록 처리

.message-hidden {
  min-height: 20px !important;
  max-width: 200px !important;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 라인수 */
  -webkit-box-orient: vertical;
}
.message-hidden:hover {
  display: block;
  overflow: visible;
  -webkit-line-clamp: none;
}