자동 말줄임 처리하는 두 가지 방법: 글자수, 너비

 

자동 말줄임 처리

텍스트가 넘칠 때, 자동으로 말줄임 처리를 해줘야할 때가 있다.

이때 텍스트를 축약하는 기준으로는 크게 두 가지가 있다. 

1. 글자수에 따라 축약
2. CSS ellipsis

각각의 방법을 알아보자!

 

글자수에 따라 축약

텍스트 글자 수에 따라 조건부 렌더링을 해주면 된다.

그리고 잘린 텍스트에 마우스를 올리면 (hover 하면) 전체 텍스트를 볼 수 있도록 Tooltip으로 띄워줄 수 있다.

아래는 name이 10자를 넘으면 앞에서부터 10자를 보여주고, 뒷 부분은 '...'으로 잘라서 보여주는 코드 예시이다. 

( 데이터가 없을 때 '-' 를 출력하도록 하는 조건부 렌더링도 포함되어 있다.)

        cell: ({ row: { original } }) => {
          return original.name ? (
            original.name.length > 10 ? (
              <div>
                <Tooltip text={<span>{original.name.substring(0, 10) + '...'}</span>} toolTipText={original.name} />
              </div>
            ) : (
              <div>{original.name ?? '-'}</div>
            )
          ) : (
            <>-</>
          );
        },

 

 

 

너비에 따른 축약 : CSS 의 ellipsis

다음은 너비에 따른 축약이다.

상자 안에 텍스트를 넣는데, 넘치는 텍스트를 처리해주고 싶을 때 이 방법이 효과적이다. 

 

글자수로 처리해주게 되면,

'한글', '영문 소문자', '영문 대문자' 각각의 너비 차이가 많이 나서

텍스트에 비해 상자 공간이 지나치게 남거나, 텍스트가 넘치게 되는 등의 문제가 생길 수 있기 때문이다.

 

너비에 따른 축약은 CSS의 ellipsis를 사용해주면 된다. 

<div class="ellipsis-example">
  This is a long text that needs to be truncated with ellipsis.
</div>

 

.ellipsis-example {
  white-space: nowrap;       /* 텍스트가 한 줄에만 표시되도록 */
  overflow: hidden;          /* 넘치는 부분 숨기기 */
  text-overflow: ellipsis;   /* 넘치는 부분에 ... 표시 */
  width: 200px;              
  border: 1px solid #ccc;    
  padding: 5px;              
}

 

white-space 속성을 사용하여 텍스트가 한 줄에만 표시되도록 하고,

overflow 속성을 사용하여 넘치는 부분을 숨기고,

text-overflow 속성을 사용하여 넘치는 부분에 ...을 표시한다.