순차적 말줄임 1.

업무 중 독특한 말줄임을 요청받은 경험이 있어서, 어떻게 구현하였는지에 대한 경험담을 적어보고자 합니다.

 

 

 

1. 요청받은 말줄임

디자이너님으로부터 위 캡처 기준으로 아래와 같이 요청받았습니다.

디폴트: 파란색, 빨간색, 초록색 영역이 순서대로 노출되며, 파란색 영역은 말줄임 없이 노출입니다.

case1(빨간색 영역이 길어질 경우): 빨간색 영역 말줄임 추가, 초록색 영역은 말줄임 없이 전체 노출

case 2(초록색 영역이 길어질 경우): 빨간색 영역 미노출, 초록색 영역 말줄임 추가

 

 

2. 말줄임 구현하기

가. 스펙 & 사용 가능 속성 확인하기

스펙: IE10+/ Android 5.0+ 

스펙이 비교적 높았기 때문에 float: left와 display: flex 조합을 사용하기로 했습니다.

 

나. 파란색 영역과 빨간색+초록색 영역 분리하기

파란색 영역은 무조건 말줄임 없이 노출, 빨간색 + 초록색 영역은 말줄임이 적용되어야 하기 때문에 두 영역을 분리하고 빨간색+초록색 영역이 영역을 잘 잡고 있는 것이 가장 중요하다고 생각했습니다. 그래서 파란색 영역을 float: left 속성을 추가하고 부모 태그에 overflow: hidden 속성을 추가하여 파란색, 빨간색, 초록색 모두 자신만의 영역을 잡을 수 있도록 구현하였습니다. 

 

다. 빨간색 영역 말줄임 추가하기

접근성에 위배되지 않고 스크린 리더기가 파란색→빨간색→초록색 순으로 읽을 수 있게 구현하는 것이 가장 중요했습니다. 그래서 빨간색 영역이 접근성에 위배되지 않게  부모 태그에 display: flex를 적용하였고, 빨간색 영역이 넘칠 경우에만 말줄임이 생길 수 있도록 빨간색 영역에 flex: 0 1 auto를 추가하고 말줄임에 필요한 속성들을 추가하였습니다.

 

라. 초록색 영역 말줄임 추가하기

이 부분부터가 까다로웠습니다. 왜냐하면 빨간색 영역이 다 줄어들고 난 후, 초록색 영역에 말줄임이 생겨야 했기 때문입니다. 여러 가지 시도를 해본 결과, 초록색 영역에 flex: none을 추가하고 영역을 잘 잡지 못하는 이슈를 해결하기 위해 max-width: 100%를 추가하고 말줄임에 필요한 속성들을 추가하였습니다.

 

 

3. 구현 결과 & 링크

 

https://codepen.io/jo_lee/pen/gOwZyPo

Responsive-TextOverflow

...

codepen.io