[CSS] 텍스트 말줄임 처리 방법 : 제한된 공간에서 효율적인 디자인으로 사용자 경험 개선 하기

텍스트 말줄임 효과는 긴 텍스트를 제한된 공간에 맞추어 보기 좋게 표시하는 디자인 기법으로, 레이아웃을 깔끔하게 유지하고 사용자 경험을 향상합니다. 디바이스의 화면 크기에 따라 텍스트를 자동으로 조절하여 다양한 화면 크기에 대응합니다. CSS로 텍스트 말줄임 효과를 어떻게 반영하는지 알아보겠습니다.

 

한 줄 텍스트 말줄임 

.textBox {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  width: 200px; 
}

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

 

 

두줄 이상 텍스트 말줄임 

다중 행 텍스트 말줄임은 -webkit-line-clamp 속성에 원하는 줄 수의 값을 부여하면 됩니다.

.textBox {
  display: -webkit-box;
  -webkit-box-orient: vertical; 
  overflow: hidden; 
  -webkit-line-clamp: 2; 
  width: 200px;
}

2줄 이상의 말줄임

 

 

 

이렇게 하면 텍스트가 해당 요소의 영역을 벗어날 때 말줄임 효과가 적용됩니다.

또 텍스트 말줄임은 특히 제한된 공간에서 긴 텍스트를 표시할 때 유용한 기능이며, 너비 값을 명시하여 요소의 크기를 제한하는 것이 중요합니다.

 

 

반응형 웹페이지에서 말줄임 예시 코드

.textBox의 너비가 width: auto;로 설정되어 있기 때문에 해당 요소는 내부 콘텐츠에 맞게 자동으로 너비를 조절하게 됩니다. 또 .num 요소의 너비 변화에 따라 .textBox의 너비도 함께 조정됩니다. 따라서 .num 요소의 너비가 변할 때 .textBox의 텍스트 말줄임 효과도 유동적으로 조정될 것입니다.

.num 요소는 동적으로 제어되는 공간이라고 가정했습니다. 

<div class="wrap">
  <div class="textBox">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eum saepe ipsa eveniet veniam, tempore vel ullam, ab magnam voluptatem consequatur, vero doloremque recusandae. Dicta voluptas neque autem voluptates ad?
  </div>
  <div class="num">1234512345</div>
</div>

.wrap{
  display: flex;
  .textBox {
    display: -webkit-box;
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    -webkit-line-clamp: 2; 
    width: auto;
    outline: 1px solid blue;
  }
  .num {
    margin-left: 15px;
  }
}

.num 요소의 길이가 짧을 때 예시

 

.num 요소의 길이가 조금 넓을 때 예시

 

 

 

이렇게 텍스트 말줄임 처리 방법 : 제한된 공간에서 효율적인 디자인으로 사용자 경험 개선 하기에 대해서 알아보았습니다.

 

 

 

[AI] 클로바 더빙(CLOVA Dubbing으로 전문가처럼 더빙하기 : 초보자 튜토리얼

 

[Safari] 개인 정보 보호의 첫걸음: 프라이버시 모드 알아보기

 

작업 생산성을 높여주는 확장 프로그램 : Prettier(프리티어) 설정법

 

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

 

[Server] QuickConnect로 외부에서 서버 접속하는 방법