css text-overflow
■ 이번에 알아볼 CSS3의 속성은 text-overflow 속성인데요. 텍스트 문장의 길이 너무 길어서 화면 영역을 벗어나게 되면 문장의 뒷부분에 텍스트가 더 있다는 의미로 말 줄임표시(....) 가 나타나도록 하는 속성입니다.
■ 이 속성값에서 사용할 수 있는 것은 [clip=말 줄임표 없이 자름]과 [ellipsis=말 줄임표 표시] 등이 있는데요. 속성값을 하나씩 넣어보면서 예제를 만들어보겠습니다.
예제에서는 두 개의 단락을 입력해서 문장의 뒷부분이 잘리는 모습을 살펴 볼 텐데요. 그전에 <p>태그를 자르기 위한 환경을 만들어 주겠습니다.
<p>태그의 폭을 450px만 지정해서 이보다 길이가 긴 문장을 잘리도록 했구요. [white-space: nowrap] 속성은 내용이 아무리 길어도 줄바꿈을 하지 않도록 하고, [overflow: hidden] 속성은 넘치는 내용을 보이지 않도록 설정하는 내용입니다. 마지막으로 <p> 태그의 범위를 구분하기 위해서 빨간색 실선 테두리를 지정했습니다.
■ 그리고 본문에 두 개의 단락을 입력했는데요. <p>의 길이가 450px이기 때문에 두 단락 모두 넘치게 될 겁니다. 첫 번째 단락 (id="aaa")에는 [text-overflow : ellipsis;]를 지정해서 말 줄임표가 생기도록 했구요. 두 번째 단락(id="bbb")은 [text-overflow : clip;] 속성으로 뒷부분의 글자가 잘리도록 만 했습니다.
■ 브라우저에서 출력해보면 첫 번째 단락은 말 줄임표(...)가 생긴 걸 확인할 수 있구요. 두 번째 단락은 단순하게 뒤쪽이 잘린 형태입니다.
이렇게 해서 넘치는 텍스트 표시를 처리할 수 있는 text-overflow 속성에 대해서 알아봤습니다. 수고하셨어요.
