react dynamic font

반응-동시대 기간

이것은 텍스트가 글꼴 크기를 랩핑하고 동적으로 조정하지 않는 반응 구성 요소입니다.

때로는 텍스트가 고정 너비를 갖기를 원하며 문자 수가 너무 커지면 글꼴 크기가 자동으로 줄어들어 텍스트가 항상 한 줄에 랩핑되지 않도록합니다. 이것이 제가이 구성 요소를 만든 이유입니다.

간단한 라이브 데모

비트로 재생하고 설치하십시오

설치

 npm install react-dynamic-font --save

또는

 yarn add react-dynamic-font

이 패키지는 반응 v16.3 이상이 필요합니다. Lower React 버전 (v15.x-v16.2.x)에서 사용하려면 yarn add react-dynamic-font@^1.0.0 보십시오. 반응 v0.14 이하의 경우 yarn add react-dynamic-font@^0.0.6 하십시오.

용법

ReactDynamicFont 부모 요소의 너비를 고정 너비로 사용하고 CSS 스타일 overflow: hidden 를 추가해야합니다.

 import React , { Component } from 'react' ;
import DynamicFont from 'react-dynamic-font' ;

class Demo extends Component {
  render ( ) {
    const style = {
      width : 400 ,
      fontSize : 30 ,
      lineHeight : 30 ,
      overflow : 'hidden' ,
    } ;
    return (
      < div style = { style } >
        < DynamicFont content = { /* Your text here */ } />
      </ div >
    ) ;
  }
}

글꼴 크기가 변경되는 동안 부드러운 애니메이션을 추가하려면 smooth 소품을 추가하십시오.

 < DynamicFont smooth content = { /* Your text here */ } />

재미있게 보내세요!