예제의 텍스트 적합 문제를 설명하는 다음 데모를 살펴 보겠습니다.
목표는 사용자 화면의 크기에 관계없이 제목이 예약 된 공간에 맞게 만드는 것입니다. 이 예에서 뷰포트 장치는 제목의 글꼴 크기를 정의하는 데 사용됩니다. 따라서 사용자의 화면을 나타내는 빨간색 테두리 iframe의 크기를 조정할 때 제목은 항상 부모에 맞습니다 
. 따라서이 방법을 사용하면 제목 텍스트가 화면 너비에 적응할 수 있습니다. 그러나 헤드 라인 스타일 구성 요소는 재사용 할 수 없습니다. 이 특정 텍스트에 대해서만 설계 되었기 때문입니다. 제목 텍스트에 컨텐츠를 추가하거나 부모의 크기를 조정하면 텍스트가 더 이상 한 줄에 맞지 않습니다. (데모에서 텍스트를 변경할 수 있습니다.) 우리는 재사용 가능한 구성 요소가 이것보다 더 적응력이 있기를 원합니다. 앞에서 언급했듯이 CSS 미디어 쿼리는 화면 크기에 따라 텍스트 글꼴을 크기로 조정할 수있는 또 다른 솔루션을 제공합니다. 이것은 전체 웹 페이지를 고려할 때 이상적인 솔루션입니다. 그러나 미디어 쿼리로 수많은 가능한 컨테이너 너비를 쫓는 것은 실용적이지 않습니다. 이것은 많은 작업을 초래할 것입니다. 또한 이는 구성 요소의 이식성을 크게 줄입니다.
반응성 반응 텍스트 에 대한 솔루션으로서 반응-텍스트 피트
따라서 React-TextFit React Library가 텍스트가 사용 가능한 공간에 자동으로 적응할 수있게하여 구성 요소를 재사용 할 수 있도록하는 방법을 살펴 보겠습니다.
알 수 있듯이 위의 문제가 해결되었습니다. React-textfit을 사용하면 이제 제목을 변경하거나 부모를 조정할 수 있습니다
크기는 사용 가능한 공간에 타이틀을 단단히 맞추는 동안 크기입니다. ### TextFit의 작동 방식
이제 React-Textfit의 작동 방식에 대해 자세히 알아 보겠습니다.
프로젝트의 공식 GitHub 페이지에 명시된 바와 같이, React-Textfit은 재사용 가능한 구성 요소에 제목과 단락을 맞추기위한 라이브러리입니다. 효과적으로 올바른 착용감을 찾고 패딩, 라인 높이 등과 같은 CSS 스타일 구성과 함께 작동합니다.
다음 명령을 시작하여 종속성에 추가 할 수 있습니다.
그런 다음 다음과 같이 텍스트에 맞도록 TextFit 구성 요소에 액세스 할 수 있습니다.
TextFit은 A 로 변환됩니다
HTML 요소이며 재사용 가능한 구성 요소 또는 HTML 요소에 단일 및 멀티 라인 텍스트를 장착 할 수 있습니다. 그것을 사용하려면 다음과 같은 새로운 라인으로 만들어야합니다.
다음과 같이
또는 포함 된 html 요소 :
<code>npm install react-textfit --save</code>
텍스트 피트는 a 이기 때문입니다
, 아래와 같이 CSS 규칙을 React 스타일 소품으로 전달할 수 있습니다.
또는 classname을 통해 다음과 같이 CSS 클래스에 할당하십시오.
<code>import { Textfit } from 'react-textfit';</code>
textfit props
TextFit에는 필요에 따라 텍스트를 맞추는 데 사용할 수있는 소품도 함께 제공됩니다. 그들을 보자 :
는 "단일"또는 "멀티"라는 두 가지 값을 취할 수있는 문자열입니다. 구성 요소가 텍스트를 맞추기 위해 사용하는 메소드를 정의합니다. "단일"모드는 제목에 적용되며 "멀티"모드는 단락에 적용됩니다. 기본값은 "멀티"입니다.
는 텍스트가 달성 할 수있는 최소 글꼴 크기 (픽셀)를 나타내는 숫자입니다. 기본값은 1입니다.
<code><textfit></textfit> 示例文本</code>
> 텍스트가 달성 할 수있는 최대 글꼴 크기 (픽셀)를 나타내는 숫자입니다. 기본값은 100입니다.
<code><textfit></textfit> 示例文本</code>
> 단일 라인 모드에서만 사용되는 부울 값이며 TextFit 구성 요소가 요소의 높이를 완전히 무시하게 만드는 데 사용됩니다. 기본값은 참입니다.
는 창 크기 조정의 스로틀 링 시간 (밀리 초)을 나타내는 숫자입니다. 기본값은 50입니다.
텍스트가 적응할 때 호출되는 함수입니다.
-
가장 중요한 두 가지는
mode와
이며,이를 통해 글꼴 크기의 하한과 상한을 각각 설정할 수 있습니다. 그런 다음 TextFit 구성 요소의 동작 방식을 정의하는 prop가 있습니다. 이를 위해서는보다 자세한 설명이 필요합니다. 따라서이 두 모드가 실제로 어떻게 작동하는지 살펴 보겠습니다. -
min 재사용 가능한 구성 요소에 한 줄의 텍스트를 장착하는 방법
단일 라인 텍스트는 제목, 제목 및 레이블로 표시됩니다. 일반적으로 에 포함됩니다
- ,
max, , - 또는 더 일반적인
forceSingleModeWidth html 요소. 단일 라인 텍스트를 다룰 때는 피팅 문제가 거의 불가피합니다. 글꼴 크기가 단락에서 사용되는 글꼴 크기보다 훨씬 크기 때문에이기는 것입니다. TextFit의 위 prop를 통해 단일 라인 모드가 활성화되면 강제 및 선택적 단계가있는 다음 알고리즘이 적용됩니다.
여기에 설명 된 바와 같이, 이진 검색 알고리즘은 올바른 글꼴 크기를 검색하여 TextFit 구성 요소에 포함 된 텍스트를 너비에 맞게 만들기 위해 사용됩니다. 그런 다음 - 가 False로 설정되면 동일한 방법이 사용되지만 요소의 높이도 고려하십시오.
throttle
반응 구성 요소를 재사용 할 수 있습니다 : 단일 라인 데모
이제, 실시간 데모와 함께 텍스트 피트 단일 라인 모드의 실제 효과를 보자. 보시다시피, 텍스트를 더 길게 만들어 TextFit은 글꼴 크기를 업데이트하여 크기와 일치하게합니다. 텍스트를 텍스트를 변경하지 않고 텍스트 상자를 크기로 조정할 때도 동일한 논리가 발생합니다. 이것은 작은 화면에서 일어나는 일입니다. 따라서 TextFit은 모든 React 구성 요소 또는 HTML 요소에서 제목과 제목을 반응시킬 수있는 완벽한 솔루션을 나타냅니다.
반응 형 반응 구성 요소에 멀티 라인 텍스트를 장착하는 방법
여러 줄의 텍스트는 단락, 자막 및 설명으로 표시됩니다. 일반적으로 , 또는
바이너리 검색 알고리즘은 텍스트 피트 구성 요소에 포함 된 텍스트가 높이에 맞게 올바른 글꼴 크기를 검색하는 데 사용됩니다. 그런 다음 동일한 방법이 사용되지만 요소의 너비도 고려됩니다. 보시다시피, 단일 라인 모드와 달리 높이는 너비보다 우선합니다. 이것은 위에서 제안한 이유로 설명 할 수 있습니다.
반응 구성 요소를 재사용 할 수있게합니다 : 멀티 라인 데모
이제 실시간 데모와 함께 Textfit 멀티 라인 모드의 실제 효과를 보자.
라이브 데모와 상호 작용하고 멀티 라인 텍스트를 더 길게 만들면 글꼴 크기가 텍스트를 HTML 요소의 크기에 맞게 만들어줍니다. TextFit 구성 요소가 텍스트를 변경하지 않고 크기를 조정할 때도 동일한 상황이 발생합니다. 이것은 작은 화면에서 일어나는 일입니다. 따라서 TextFit은 모든 HTML 요소 또는 React 구성 요소에서 단락과 긴 설명을 반응하는 좋은 솔루션입니다.
결론
스마트 폰과 태블릿이 웹에 액세스하는 데 가장 널리 사용되는 장치가되었으므로 응답 성은 무시할 수없는 문제가되었습니다. 이 기사에서는이 분야의 특정 문제를 조사합니다. 특히, 우리는 특정 텍스트 피팅 문제, 해결하는 것이 왜 중요한지, 그리고이를 반응에서 수행하는 방법을 탐구합니다. <code>npm install react-textfit --save</code>
React-TextFit 라이브러리는 유용하고 오픈 소스의 효과적인 React 라이브러리로, 모든 REACT 구성 요소에 텍스트 (단일 및 멀티 라인)를 쉽게 조정할 수 있습니다. 설명과 프레젠테이션이 유용해지기를 바랍니다. 읽어 주셔서 감사합니다! 질문, 의견 또는 제안이 있으시면 언제든지 저에게 연락하십시오.
반응 형 반응 구성 요소에 대한 자주 묻는 질문 —TextFit (FAQS)
React의 TextFit 구성 요소의 주요 함수는 무엇입니까?
React의 TextFit 구성 요소는 주로 텍스트를 반응하는 데 사용됩니다. 용기의 너비와 높이에 따라 글꼴 크기를 자동으로 조정합니다. 레이아웃이 다양한 화면 크기에 적응 해야하는 반응 형 웹 디자인에 특히 유용합니다. TextFit 구성 요소는 장치 나 화면 크기에 관계없이 텍스트를 읽기 쉽고 미적으로 즐겁게합니다.
React 프로젝트에 TextFit 구성 요소를 설치하는 방법은 무엇입니까?
NPM (Node Package Manager)을 사용하여 React 프로젝트에 TextFit 구성 요소를 설치할 수 있습니다. 터미널을 열고 프로젝트 디렉토리로 이동 한 다음 다음 명령을 실행하십시오. Textfit 구성 요소를 프로젝트의 종속성에 추가합니다.
React 응용 프로그램에서 TextFit 구성 요소를 사용하는 방법은 무엇입니까?
TextFit 구성 요소를 설치 한 후 다음 코드 라인을 사용하여 React 구성 요소로 가져올 수 있습니다. 그런 다음 다른 React 구성 요소와 마찬가지로 렌더 메소드에서 TextFit 구성 요소를 사용할 수 있습니다. 예를 들면 :
.
TextFit 구성 요소의 다른 패턴은 무엇입니까? <code>npm install react-textfit --save</code>
textfit 구성 요소는 "단일"과 "멀티"라는 두 가지 모드를 제공합니다. "단일"모드는 전체 텍스트가 한 줄에 맞도록 글꼴 크기를 조정합니다. "멀티"모드를 사용하면 글꼴 크기를 조정하는 동안 텍스트를 포장하여 모든 텍스트가 컨테이너에 맞도록합니다.
TextFit 구성 요소에서 최대 및 최소 글꼴 크기를 설정할 수 있습니까?
예, 각각 및
소품을 사용하여 TextFit 구성 요소에서 최대 및 최소 글꼴 크기를 설정할 수 있습니다. 예를 들면 : . import TextFit from 'react-textfit';
TextFit 구성 요소는 오버플로를 어떻게 처리합니까? <textfit max="{40}" mode="single">这是一些文本</textfit>
textfit 구성 요소는 글꼴 크기를 조정하여 텍스트 오버 플로우를 자동으로 방지합니다. 텍스트를 지정된 최소 글꼴 크기로 컨테이너에 배치 할 수없는 경우 TextFit 구성 요소는 텍스트를 자르고 타원을 추가합니다.
다른 React 구성 요소와 함께 TextFit 구성 요소를 사용할 수 있습니까?
예, TextFit 구성 요소는 다른 React 구성 요소와 함께 사용할 수 있습니다. TextFit 구성 요소의 다른 구성 요소를 중첩하거나 다른 구성 요소에서 TextFit 구성 요소를 사용할 수 있습니다.
TextFit 구성 요소는 모든 브라우저와 호환됩니까?
TextFit 구성 요소는 React 및 CSS3을 지원하는 모든 최신 브라우저와 호환됩니다. 여기에는 Chrome, Firefox, Safari, Edge 및 Internet Explorer 9 이상이 포함됩니다.
서버 측 렌더링 된 React Application에서 TextFit 구성 요소를 사용할 수 있습니까?
예, TextFit 구성 요소는 서버 측 렌더링 된 반응 응용 프로그램에서 사용할 수 있습니다. 그러나 TextFit 구성 요소는 FONT 크기를 계산하기 위해 DOM에 의존하기 때문에 클라이언트가 구성 요소를 설치 한 후에 만 글꼴 만 크게 만듭니다.
TextFit 구성 요소의 문제를 해결하는 방법은 무엇입니까?
TextFit 구성 요소에 문제가있는 경우 오류 메시지가 있는지 콘솔을 확인할 수 있습니다. 이 메시지는 문제를 일으킬 수있는 것에 대한 단서를 제공 할 수 있습니다. 문제를 해결할 수없는 경우 React 커뮤니티 또는 TextFit 구성 요소 유지 보수 직원의 도움을받을 수 있습니다.
