[React + typescript] 말줄임표(text-ellipsis) 중간에만 적용하기

 

일반적으로 css의 text-ellipsis를 적용하면 뒷부분만 말줄임표 처리가 되는데,

(ex. "가나다라마...")

 

나는 위와 같이 앞부분과 뒷부분은 사용자에게 보여주고, 중간 부분만 말줄임표하는 처리가 필요했다.

(ex. "가나다...바사")

 

 

자바스크립트를 이용해 다음과 같은 과정으로 처리했다.

 

1. 실제 텍스트를 먼저 렌더링한 뒤 (서버에서 받아오는 값에 따라 width가 넘칠수도, 안넘칠수도 있다)

2. ref.current.offsetWidth를 통해 렌더링된 div의 width를 구한다.

3. 만약 내용이 넘치면 isOverflow를 true로 설정한다.

4. isOverflow가 true일 땐 첫 10글자, 뒤 4글자를 잘라낸 값을 보여준다.

 

const TargetCell = ({width, content}: {width: number, content: string}) => {
  const ref = useRef<HTMLDivElement | null>(null);
  const [isOverflow, setIsOverflow] = useState(false);
  
  // 실제 콘텐츠 내용이 cell width를 넘는지 판별
  useLayoutEffect(() => {
    if (ref.current) {
      if (ref.current.offsetWidth > width) setIsOverflow(true);
      else setIsOverflow(false);
     }
  }, [setIsOverflow, width]);
  
  
  const prevChars = content.slice(0, 10); // 첫 10글자 잘라내기
  const lastChars = content.slice(-4); // 마지막 4글자 잘라내기
 
  return ({isOverflow ? <div>{prevChars}...{lastChars}</div>} : <div ref={ref}>{content}</div>)
}

 

 

js 사용하지 않고 그냥 css만으로 처리하고 싶었는데 방법을 찾지 못했다... 더 간결하고 좋은 방법이 없을까?