19.12.09 개발기록 -[CSS] text가 width를 넘어가면 말 줄임표(...) 으로 표현되게 하기
오늘은 CSS를 이용하여 원하는 text가 할당된 div 나 span 태그의 width를 넘어서 길어지게 되면
말줄임표(...) 으로 표현되게 하는 CSS 문법을 포스팅하도록 한다.
두 번째 사진과 같은 경우에 자동으로 말 줄임표(...) 으로 표현되도록하는 CSS 문법을 소개한다.
바로,
|
1
2
3
|
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
|
요 삼형제이다.
1. overflow: hidden 에서 overflow는 요소의 박스에 내용이 더 길 때 어떻게 보이게 할 지 선택하는 속성이다.
여기서 사용한 hidden은 내용이 길면 자른다.
이 외에도,
visible : 기본 값이며, 내용이 더 길어도 그대로 보이게 하는 속성,
scroll : 내용이 더 길 때만 스크롤 바가 보이게 하는 속성,
auto : 내용이 잘릴 때만 스크롤 바가 생겨나는 속성.
요정도가 있다.
2. text-overflow 는 위 1번의 overflow 에서 hidden으로 자른 내용을 처리하는 방식을 정하는 속성이며,
ellipsis : 말 줄임표(...) 으로 표현하는 속성이다 !
3. white-space 는 요소안의 공백을 어떻게 처리할 지 선택하는 속성으로,
nowrap : 공백이 여러개여도 1개로만 표시하며, text가 길어도 줄바꿈이 되지 않는 속성이다.
그 외에도,
pre : 공백을 있는 그대로 표시하는 속성, -> 코드에 줄바꿈이 없다면 줄바꿈을 실행하지 않으며, 마치 <pre>태그와 같이 작동한다.
pre-wrap : 공백을 코드에 있는 그대로 표시하며, 코드에 줄바꿈이 없어도 줄바꿈을 실행한다.
pre-line : 공백을 여러개 넣어도 1개만 표시한다. 코드에 줄바꿈이 없어도 자동으로 줄바꿈을 실행하며, 코드에 줄바꿈이 있을 때에도 그대로 표시 한다.
CSS를 하면서 가장 중요한 건, 아무래도 검사도구를 이용하여 CSS를 만져보고, 이런 속성을 줬을 때 어떻게 움직이는 지 확인해 보고, 또 나보다 고수 개발자에게 더 좋은 방법이 있는 지 먼저 물어보고 잘 배우는 것이라는 것을 오늘 깨달았다 !
이렇게 하면 되겠지 ~ 하면서 초보가 하다 보면, 화면의 크기에 따라서 애써맞춰 놓은 모든 CSS들이 처참하게 깨지는 꼴을 보게 되기 때문이다....... 모른다면 좋은 방법을 알려줄 수 있는 사수가 있는 것이란... 정말 행복한 것이다.
이 포스팅을 보시는 분 중 제가 틀린 부분, 잘못 이해한 부분이 있어 알려주실만한 내용이 있다면 언제든 편하게 댓글 남겨주세요 :) 감사합니다 !