[UI 개선] 텍스트가 긴 문장 대응하기

문제

텍스트가 긴 경우 UI에서 모두 보여주게 되었을 때 밑에 오는 컴포넌트 요소들이 묻히거나 디자인 의도대로 나오지 않는 경우가 발생한다. 이 부분을 개선하기 위해 나름 생각했던 부분에 대해 정리를 해보려 한다.

단순하게 maxLength 제한하기

input 태그에서 maxLength를 제한하여 디자인이 깨질 수 있는 것을 미리 방지한다.
그러나 별로 좋은 방법은 아니다.왜냐하면 영어나 한글의 경우 i 와 A 같이 뚱뚱함의 정도가 다르기 때문에 i가100자 들오가는 것과 A가 100자들어가는 것에는 큰 차이가 있다.

css 이용하기

css를 이용하여 처리하는 많은 방법이 있고 몇가지 방법을 정리 하려 한다

컴포넌트 width를 제한하여 해당 width만큼은 채우게 하는 방법

overflow: hidden;
text-overflow: ellipses;
max-width: 100;
word-break: break-all

멀티라인에서 제한하는 방법

display: -webkit-box;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 2번째까지만 텍스트가 나온다.

유의사항

caniuse에서 호환성을 한번 알아보고 사용하길 바란다.