HyunJun 기술 블로그

text-overflow 본문

CSS

text-overflow

공부 좋아 2023. 6. 9. 11:35
728x90
반응형

text-overflow

CSS의 text-overflow 속성은 텍스트가 요소 내에서 넘칠 때 어떻게 처리할지를 지정하는 속성이다. 특히, 요소의 크기가 텍스트를 표시하는 데에 충분하지 않을 경우 텍스트 오버플로우(overflow)가 발생할 수 있다. text-overflow 속성은 이러한 상황에서 어떻게 처리할지를 지정하여 텍스트의 보기 방식을 결정한다. text-overflow 속성은 주로 white-space: nowrap; (텍스트 줄바꿈 금지) 속성과 함께 사용된다.

 

text-overflow 속성은 다음과 같은 값들을 가질 수 있다.

  • clip: 넘치는 텍스트를 자르고, 요소의 영역 내에서만 보여준다. 잘린 텍스트는 보이지 않는다. 요소의 overflow 속성이 hidden이거나 auto일 경우에만 작동한다.
  • ellipsis: 넘치는 텍스트를 자르고, 잘린 부분을 생략 부호(...)로 표시한다. 요소의 overflow 속성이 hidden이거나 auto일 경우에만 작동한다. 또한, 요소의 너비가 정해져 있거나, width, max-width, flex-basis와 같은 너비 관련 속성을 가져야 한다.

 

text-overflow 속성을 사용하려면 white-space 속성을 nowrap로 설정하여 텍스트가 줄바꿈 되지 않도록 해야 한다.
  <head>
    <style>
      .container {
        background-color: beige;
        width: 150px;
        height: 150px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
      }
    </style>
  </head>
  <body>
    <div class="container">texttexttexttexttexttexttexttexttexttexttexttext</div>
  </body>

(왼쪽) clip, (오른쪽) ellipsis

728x90
반응형
저작자표시 비영리 변경금지
'CSS' Related Articles more
Comments