개발자로 가는길

탭메뉴를 따라만들면서

1.한줄을 넘치는 글은 줄바꿈되지않고

2. 상자를 넘어가는 글은 숨기고

3.숨겨진 글의 자리는 말줌임표로 채우는 방법을 배워보았다.

1.  white-space: nowrap;

2.  overflow: hidden;

3.  text-overflow: ellipsis;

이 세가지를 같이 써야 위의 이미지와 같은 말줄임표를 만들 수 있다.

1.white-space:nowrap;

white-space란?

화면상으로는 아무것도 표시되지 않는 문자.

스페이스(여백), 탭 문자(tab character:화면이나 인쇄되는 페이지상의 행과 열의 위치 맞춤에 사용되는 문자), 개행(改行) 문자 등 화면상으로는 표시되지 않는 문자를 화이트스페이스라고 한다.

출처: https://www.tabmode.com/homepage/white-space.html#gsc.tab=0 

2.overflow:hidden;

overflow속성

요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. 

[ visible | hidden | clip | scroll | auto ]{1,2}

3.text-overflow:ellipsis;

박스안에 내용이 넘칠때 텍스트를 어떻게 해야할지 처리하는 속성.

text-overflow속성은 다음2가지를 모두 충족시켜야 적용된다.
1.overflow값이 hidden,scroll,auto일때(visible제외)
2.white-space:nowrap(텍스트길어도줄바꿈되지않음)또는 텍스트가 다음줄로 이동하지 않는 비슷한경우

text-overflow속성은 block컨테이너를 넘치는 그 줄의 컨텐츠에만 적용가능하기때문이다.(컨텐츠의 아래로 넘치는 텍스트에는 쓸수없다.)

[ clip | ellipsis | <string> ]{1,2}

이 text-overflow속성은 하나 또는 두 개의 값을 사용하여 지정할 수 있습니다. 하나의 값이 제공되면 행 끝 (왼쪽에서 오른쪽으로 텍스트의 오른쪽 끝, 오른쪽에서 왼쪽으로 텍스트의 왼쪽 끝)에 대한 오버 플로우 동작을 지정합니다. 두 개의 값이 제공되면 첫 번째 줄의 왼쪽 끝에 오버플로 동작을 지정하고 두 번째 줄의 오른쪽 끝에 해당 값을 지정합니다.