[React] 글자 수 초과 시 ... 처리하는 방법

<span>{truncate(movie.overview, 100)}</span>

text-overflow : ellipsis;

ellipsis는 잘라지는 부분에 말 줄임표(...)가 붙으면서 잘린 텍스트가 있다고 표시를 해줍니다.

  max-height: 40px;

  overflow:hidden;

  text-overflow:ellipsis;

  display:-webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient:vertical;

등등의 방법으로 넘치는 텍스트를 ... 처리할 수 있습니다.

 

 

리엑트에서 사용하는 방법 중 하나는

const truncate = (str, n) => {
  return str?.length > n ? str.substr(0, n - 1) + "..." : str;
};

<span>{truncate(movie.overview, 100)}</span>

문자열 자르기 substr을 이용하여 넘치는 텍스트를 자른 후 ... 을 넣는 방법이 있습니다.