[CSS] 텍스트 한 줄로 만들기

소요 시간: 3분 조회수: 137

웹 개발 시, 텍스트가 지정된 공간을 초과하는 경우 시각적으로 깔끔하게 정리하는 것이 중요합니다. CSS 텍스트 한 줄로 처리하는 방법을 통해 이 문제를 해결할 수 있습니다. 이번 포스트에서는 CSS를 사용하여 텍스트를 한 줄로 제한하고, 넘치는 부분을 말줄임표(ellipsis)로 처리하는 방법에 대해 알아보겠습니다.


텍스트 한 줄로 만들기: 기본 개념

HTML 요소 내 텍스트가 부모 요소의 너비를 초과할 때, 기본적으로 텍스트는 다음 줄로 넘어갑니다. 하지만 때로는 텍스트를 한 줄로 유지하고, 초과하는 부분을 잘라내어 말줄임표로 표시하고 싶을 때가 있습니다. 이럴 때 유용한 CSS 속성이 바로 white-space, overflow, text-overflow입니다.


주요 CSS 속성

white-space: nowrap;

이 속성은 텍스트를 한 줄로 제한합니다. 기본적으로 텍스트가 긴 경우 다음 줄로 넘어가지만, nowrap 속성을 사용하면 강제로 한 줄로 유지됩니다.

overflow: hidden;

이 속성은 부모 요소의 크기를 초과하는 자식 요소의 콘텐츠를 숨깁니다. 텍스트가 지정된 너비를 넘을 경우 보이지 않도록 처리합니다.

text-overflow: ellipsis;

이 속성은 overflow 속성과 함께 사용되어, 넘치는 텍스트 부분에 말줄임표(…)를 표시합니다. 이는 사용자가 텍스트가 더 있다는 것을 시각적으로 인식할 수 있도록 도와줍니다.


예제 코드

아래는 CSS 텍스트 한 줄로 처리하기 위한 주요 속성들을 조합하여 텍스트를 한 줄로 제한하고 넘치는 부분을 말줄임표로 처리하는 예제 코드입니다.

a {
  width: 270px;        /* 텍스트를 감쌀 요소의 너비 */
  white-space: nowrap; /* 텍스트를 한 줄로 유지 */
  overflow: hidden;    /* 넘치는 텍스트를 숨김 */
  text-overflow: ellipsis; /* 넘치는 부분에 말줄임표 표시 */
}


HTML 예시

위의 CSS 코드를 실제로 적용한 HTML 예제는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>텍스트 한 줄로 처리하기</title>
    <style>
    a {
      width: 270px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block; /* a 태그는 인라인 요소이므로 블록 요소로 변환 */
    }
    </style>
  </head>
  <body>
    <a href="#">이것은 아주 긴 텍스트로, 한 줄로 제한되고 말줄임표로 표시됩니다.</a>
  </body>
</html>


CSS 말줄임표 사용법

텍스트가 길어져서 부모 요소의 경계를 넘어가는 경우, 시각적으로 말줄임표를 사용하여 넘치는 텍스트를 처리하는 방법을 설명합니다. CSS 말줄임표 사용법은 웹 개발에서 자주 사용되는 기술입니다. white-space, overflow, text-overflow 속성을 적절히 사용하면, 시각적으로 깔끔하고 직관적인 인터페이스를 구현할 수 있습니다.


웹 개발 CSS 팁

다양한 웹 개발 프로젝트에서 유용하게 사용할 수 있는 웹 개발 CSS 팁 중 하나가 바로 텍스트를 한 줄로 처리하는 것입니다. 위에서 설명한 CSS 속성들을 잘 활용하면 텍스트가 넘치는 문제를 효과적으로 해결할 수 있습니다.

인기글

CSS 리스트