CSS display: -webkit-box 란? (투두리스트 리팩토링 2☀️)

이번 투두리스트 코드리뷰에서 페어팀이 아이템 안의  텍스트 (title, text)가 길어질수록 길어진 상태 그대로 보여진다는 점을 지적해주셨다. 

 

원하는 기능을 추가하지 못한것도 문제이지만, 그것보다 이미 사용자가 사용하고 있는 만들어진 기능에서 UI/UX 적인 부분에서 문제가 있다는게 더 심각......

 

어떤 행동, 어떤 입력이 들어올지 모르니 나중에 프로젝트를 할때도 다양한 피드백을 받는게 좋을 것 같다.

 

 

 

아무튼 그래서 텍스트가 일정 길이 이상 길어지면 ...으로 표시되게 하고, 상세페이지로 들어오게 유도한 다음 상세페이지에서 조금 더 길게 보여주게 구현했다. 물론 상세페이지에서도 3줄 이상 길어지면 ...으로 표시된다. 하지만 충분히 (약 55자 정도) 쓸 수 있다.

 

 

만약 이게 조금 좁다는 의견이 있다면 글씨 크기를 약간 줄이거나 텍스트박스 크기를 길게 하면 될 것 같다.

 

 

 

 

 

 

 

  .title {
    font-size: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .text {
    font-weight: 500;
    font-size: 0.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

 

텍스트박스에 이 속성들을 추가했다.

 

1. display: -webkit-box

2. -webkit-line-clamp: 2; 
3. -webkit-box-orient: vertical;

4. overflow: hidden;
5. text-overflow: ellipsis;

 

 

1. display: -webkit-box: css 속성의 앞에 붙는 접두어 (vender prefix) 중 -webkit은 구글, 사파리 브라우저에 적용되는 속성이다.

 

2. -webkit-line-clamp: 2; : 텍스트 블럭 길이를 정해진 line 의 수로 제한하는 속성이다. 1번 속성과 같이 사용해야한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

 

3. -webkit-box-orient: vertical; : 1,2번과 같이 사용되는 속성으로, 가로 또는 세로 중 어느 방향으로 나열할 것인지에 대한 속성이다. 

 

4. overflow: hidden; ellipsis 되는 일정 크기 이상의 텍스트들을 hidden 시킨다.

 

5. text-overflow: ellipsis를 통해 일정 길이를 넘어가는 텍스트들은 ... 으로 대체된다. 

https://drafts.csswg.org/css-overflow-4/#text-overflow