추적: • css_말줄임_사용
, ,

CSS 말줄임(ellipsis) 사용법

잘 안된다고 하는 경우가 많은데, 다음 두가지를 확실히 해줘야 한다.

  1. 넓이를 명확히 지정한다.
  2. 줄바꿈방지를 해준다.
    max-width: 100px;    /* 폭을 명확히 지정! */
    text-overflow: ellipsis;
    white-space: nowrap; /* 줄바꿈방지 */
    overflow: hidden;

혹은 다음과 같이 만들어서 첨가해 준다. 

.ellipsis { 
  width: 150px; 
  text-overflow: ellipsis; 
  white-space: nowrap; 
  overflow: hidden;
}

같이 보기

역링크