중간 반응 후크에서 자르기

첫 번째 npm 패키지 use-truncate-from-middle 를 게시했습니다.
반응 후크이며 주어진 줄임표 문자열(즉, '...' )을 사용하여 가운데에서 텍스트를 동적으로 자릅니다.
컨테이너*의 너비와 글꼴 스타일을 고려합니다.
이 블로그에서는 텍스트를 자르는 가장 일반적인 방법과 useTruncateFromMiddle 후크를 사용해야 하는 경우에 대해 이야기하겠습니다.
truncate from middle hook 작동 방식에 대한 자세한 내용을 알고 싶다면 내 블로그 게시물을 확인하세요.
Calculate Number of Characters Fit into an HTML Element .

문제

웹 개발에서 텍스트를 위한 공간이 충분하지 않은 경우 즉 컨테이너의 너비가 고정된 값인 경우 끝에서 줄임표로 자릅니다. 그리고 이것을 순수한 CSS로 만드는 것은 매우 쉽고 안전합니다.
그러나 때때로 텍스트 컨테이너의 너비 값은 프런트엔드 팀에서 설정하지 않습니다. 즉, 해당 값은 API 호출이나 SDK 또는 구성 파일 등에서 가져옵니다.
이러한 경우 긴 텍스트를 동적으로 자르기 위해 CSS와 함께 JavaScript를 포함해야 합니다.
다음 섹션에는 끝에 줄임표가 있는 긴 텍스트를 자르는 세 가지 가장 일반적인 방법이 있습니다.

텍스트를 자르는 전통적인 방법

사례 1: 한 줄

나는 특히 당신이 프론트엔드 개발에 전문화되어 있다면 긴 텍스트를 자르기 위한 다음 CSS 규칙을 마음속으로 알고 있을 것이라고 확신합니다.

.truncate {
  width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

사례 2: 여러 줄

예를 들어 최대 두 줄의 문자열을 담을 수 있는 컨테이너 요소가 있는 경우와 같이 첫 번째 줄이 아닌 다른 줄에서 텍스트를 잘라야 하는 경우 다음 css 규칙을 사용합니다.

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2; // truncates at the second line
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

사례 3: 컨테이너 너비가 동적임

이 경우 CSS와 함께 Javascript를 포함해야 합니다.
특히 CSS-IN-JS 패턴 덕분에 만들기가 매우 쉽습니다. 아래를 참조하십시오.

  const truncateStyle = {
    width: `${widthValue}`,
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  };

위의 코드 블록에서는 JavaScript로 스타일 객체를 동적으로 생성합니다.

중간에서 텍스트 자르기

정적 방법: 컨테이너의 너비를 알고 있음

아래 함수는 중간에서 텍스트를 자릅니다.

export const truncateFromMiddle = (
  fullStr= '',
  strLen,
  middleStr= '...',
) => {
  if (fullStr.length <= strLen) return fullStr;
  const midLen = middleStr.length;
  const charsToShow = strLen - midLen;
  const frontChars = Math.ceil(charsToShow / 2);
  const backChars = Math.floor(charsToShow / 2);
  return (
    fullStr.substr(0, frontChars) +
    middleStr+
    fullStr.substr(fullStr.length - backChars)
  );
};

이 함수는 원본 텍스트fullStr와 원하는 길이인 매개변수strLen를 UI에 표시해야 합니다.
보시다시피 이 방법은 컨테이너의 너비 값을 알고 있거나 프런트엔드 개발자가 .css 파일에서 너비 값을 설정하는 사람인 경우에만 작동합니다. 프론트엔드 개발자는 자를 시기와 자를 양을 결정합니다. 따라서 너비 값을 알고 있고 중간에서 텍스트를 잘라야 하는 경우 이러한 종류의 솔루션으로 충분합니다.

컨테이너의 너비가 설정되지 않았으며 외부 데이터에 따라 다름

이 경우 정적 최대값strLen을 설정할 수 없으며 이전truncateFromMiddle 함수를 사용하여 중간에서 텍스트를 자릅니다. 잘라낼 때와 모든 텍스트를 표시할 때를 확신할 수 없기 때문입니다. 그리고 실제로 너비에 관한 것이 아니라 글꼴 스타일에 따라 다릅니다. 글꼴 스타일 값도 외부에서 오는 경우에도 언제 잘라야 하는지 100% 확신할 수 없습니다. 예를 들어 굵은 글꼴과 큰 글꼴 크기의 텍스트는 작은 글꼴 크기보다 더 많은 공간을 차지합니다.
이러한 경우 useTruncateFromMiddle 후크를 사용할 수 있습니다. 컨테이너 요소ref와 원래 텍스트 값을 매개변수로 사용합니다.
아래에서 후크의 예시 결과를 볼 수 있습니다.

결론

이 블로그에서는 useTruncateFromMiddle 후크가 필요한 경우를 보여주려고 했습니다.
기회가 있거나 정말 필요할 때 패키지를 다운로드하여 사용해 볼 수 있습니다. 귀하의 의견에 따라 패키지를 업데이트할 계획입니다. 읽어주셔서 감사합니다... 최고입니다.


*컨테이너: 즉, div , span , button , 읽기 전용textarea 또는 기타 편집 불가능한 DOM 요소.