HTML 지정한 width 영역보다 텍스트 내용이 더 길 때 끝에 … 표시 방법


웹 페이지를 만들 때 div 태그로 영역을 지정해서 해당 영역 안에 텍스트를 표시하는 경우가 많이 있습니다.

이렇게 영역을 지정해서 텍스트 내용을 표시할 때 넓이에 해당하는 width 값 보다 더 긴 텍스트가 있을 경우 웹 페이지 화면은 브라우저에서 어떻게 보여질까요?

태그 스타일(Style)을 어떻게 정의하는지에 따라 텍스트가 표시되는 형태는 조금씩 다를 수 있습니다.

이번 글에서는 HTML 지정한 width 영역보다 텍스트 내용이 더 길 때 끝에 … 표시 방법에 대해 알아보겠습니다.

HTML 지정한 width 영역보다 텍스트 내용이 더 길 때 끝에 ... 표시 방법

예제 설명을 위한 기본 style 정의

▼ 아래 Style은 div 태그에 대한 기본 스타일 정의입니다.

<style>
   div {
      background-color: #f7ff9f;
      padding: 10px;
      width: 250px;
   }
</style>

div 태그의 스타일이 위와 같이 정의되어져 있을 때 div에 표시되는 텍스트의 내용이 “정의된 영역보다 텍스트가 더 클 때 어떻게 표시 될까요?“를 웹 페이지에서 어떻게 표현되는지 확인해 보겠습니다.

정의된 영역보다 텍스트가 더 클 때 어떻게 표시 될까요?
  • 앞서 정의한 스타일만 적용했을 때는 지정한 영역 내에서 자동으로 줄바꿈 되어 표시됩니다.
  • 따라서 줄바꿈으로 늘어나는 높이(Height)만큼 화면 구성이 아래로 밀려서 내려가게 됩니다.

줄바꿈을 하지 않기 위해 white-space: nowrap; 스타일 추가하기

앞에서 정의한 스타일에서 white-space: nowrap; 를 추가했을 때 어떻게 표현되는지 확인해 보겠습니다.

<style>
   div {
      background-color: #f7ff9f;
      padding: 10px;
      width: 250px;
      white-space: nowrap;
   }
</style>

▼ 적용한 예제

정의된 영역보다 텍스트가 더 클 때 어떻게 표시 될까요?
  • 텍스트의 길이가 지정한 영역을 벗어나는 경우 줄바꿈은 되지 않고 div width 값에 영향을 받지 않고 그대로 표시됩니다.
  • 하지만 왠지 자연스럽지 않는 결과임을 알 수 있습니다.

스크롤이 표시되도록 overflow: scroll; 스타일 추가하기

앞에서 정의한 스타일에서 overflow: scroll; 를 추가했을 때 어떻게 표현되는지 확인해 보겠습니다.

<style>
   div {
      background-color: #f7ff9f;
      padding: 10px;
      width: 250px;
      white-space: nowrap;
      overflow: scroll; 
   }
</style>

▼ 적용한 예제

정의된 영역보다 텍스트가 더 클 때 어떻게 표시 될까요?
  • 지정한 width 영역을 벗어나는 경우 스크롤이 나타나게 됩니다.
  • 스크롤이 표시되는 높이(Height) 만큼 아래로 화면이 내려가게 됩니다.

지정한 width 영역까지만 텍스트를 표시하기 위해 overflow: hidden; 스타일 추가하기

앞에서 정의한 스타일에서 overflow: scroll; 대신 overflow: hidden; 를 추가했을 때 어떻게 표현되는지 확인해 보겠습니다.

<style>
   div {
      background-color: #f7ff9f;
      padding: 10px;
      width: 250px;
      white-space: nowrap;
      overflow: hidden; 
   }
</style>

▼ 적용한 예제

정의된 영역보다 텍스트가 더 클 때 어떻게 표시 될까요?
  • 스크롤이 나타나지 않고 정의한 width 범위 안에서 텍스트가 표시됩니다.
  • 보여주고자 하는 텍스트가 화면에 보여지는 것이 실제 전부 표시된 것인지? 아니면 잘려서 표시된 것인지? 판단하기가 어려워 집니다.

지정한 width 영역까지만 텍스트를 표시하기 위해 text-overflow: clip; 스타일 추가하기

앞에서 정의한 스타일에서 text-overflow: clip; 를 추가했을 때 어떻게 표현되는지 확인해 보겠습니다.

<style>
   div {
      background-color: #f7ff9f;
      padding: 10px;
      width: 250px;
      white-space: nowrap;
      overflow: hidden; 
      text-overflow: clip; 
   }
</style>

▼ 적용한 예제

정의된 영역보다 텍스트가 더 클 때 어떻게 표시 될까요?
  • clip는 text-overflow의 기본 값이며 영역에 맞게 텍스트를 잘라서 보여집니다.

정의된 width 영역보다 텍스트가 더 클 경우 끝에 … 으로 표시하기

앞에서 정의한 스타일에서 text-overflow: clip; 대신 text-overflow: ellipsis; 를 추가했을 때 어떻게 표현되는지 확인해 보겠습니다.

<style>
   div {
      background-color: #f7ff9f;
      padding: 10px;
      width: 250px;
      white-space: nowrap;
      overflow: hidden; 
      text-overflow: ellipsis; 
   }
</style>

▼ 적용한 예제

정의된 영역보다 텍스트가 더 클 때 어떻게 표시 될까요?
  • 정의한 width 영역을 넘어가는 경우 정의된 영역까지만 텍스트가 표시되고, 끝에 ‘…‘이 붙어 텍스트 내용이 자동으로 줄여서 표시되었다는 것을 알려줍니다.





이 글이 도움이 되었기를 바랍니다. ^-^


답글 남기기