게시판의 제목, 혹은 메인 페이지에서 내용을 뿌려줄 때.. 글은 긴데.. 표시 할 영역은 항상 한정되어 있습니다. 이런경우 보통은 문자열 자르기를 통해 해당 영역을 넘어서지 않을정도만 표기하는 방법을 사용합니다.
하지만 한글 영문의 특성, 그리고 폰트마다 제각각의 특성이 있어 그 영역을 딱 맞추긴 쉽지 않습니다. 이럴 경우 HTML 엘리먼트의 overflow: hidden으로 위 문제를 해결 할 수 있습니다. 코드에서 따로 문자열 자르기를 할 필요 없이 말입니다.
아래는 개발자가 사용자가 입력한 글의 길이를 예상 못해서 발생된 경우이며, 그 밑의 예는 개발자가 사용자의 글 길이를 일일히 예측 할 필요가 없는 예입니다. (여기서 우리는 400px의 한줄 영역만 표시할려고 했다고 가정합니다.)
위 예에서 보듯이 첫번째 예의 경우는 첫줄을 벗어나 밑으로 여러줄 표시되고 말았습니다. CSS의 display값에 따라 다르겠지만 겹쳐 보이던지 아니면 레이아웃이 밑으로 내려가 깨질것입니다. 하지만 두번째의 경우는 같은 내용의 글을 포함하고 있지만 빨간 박스 안에 표시되는 내용만 보여주고 있습니다.
어떤 차이가 있을까요? 소스를 살펴보겠습니다.
|
1 2 3 4 5 6 7 |
<div style="border: 1px solid red; width: 400px; height: 20px; line-height: 20px; margin: 10px; ">
안녕하세요. 게시판이나 혹은 레이아웃상 어느정도 긴 글이 나올지를 모르는 경우 우리는 문자열 자르기를 합니다. 하지만 문자열 자르기의 경우 영문/한글 및 폰트의 설정에 따라 표시되는 영역이 다 다르기에 정확히 여기서 보이는 빨간 박스안에 표시하기란 무리가 있습니다. 이럴땐... 바로 이렇게 사용 해 보세요.
</div>
<div style="border: 1px solid red; width: 400px; height: 20px; line-height: 20px; margin: 100px 10px 10px 10px; overflow: hidden; white-space: nowrap;">
안녕하세요. 게시판이나 혹은 레이아웃상 어느정도 긴 글이 나올지를 모르는 경우 우리는 문자열 자르기를 합니다. 하지만 문자열 자르기의 경우 영문/한글 및 폰트의 설정에 따라 표시되는 영역이 다 다르기에 정확히 여기서 보이는 빨간 박스안에 표시하기란 무리가 있습니다. 이럴땐... 바로 이렇게 사용 해 보세요.
</div> |
위 두 소스의 내용(DIV엘리먼트 안에 포함된 텍스트)는 같지만 CSS에 약간의 창가 있습니다.
바로 이것~~
overflow: hidden; white-space: nowrap;
이게 위처럼 전혀 다른 결과를 보여줍니다. 또한 아래처럼 개발한다고 한다면 여러분이 가지고 있는 문자열 자르기 함수는 앞으로 영영 삭제될지도.. ^^
