react dynamic font

反應性觸及法

這是一個反應組件，使您的文本不會包裝並動態調整字體大小

有時，我們希望一些文本具有固定寬度，並且當字符數量太大時，它會自動降低字體大小，因此文本始終在一行無需包裝的情況下。這就是為什麼我創建此組件的原因。

一個簡單的現場演示

玩耍和安裝

安裝

 npm install react-dynamic-font --save

或者

 yarn add react-dynamic-font

This package require react v16.3 or higher, if you want to use at lower react version(v15.x - v16.2.x), try yarn add react-dynamic-font@^1.0.0 , for React v0.14 and below, try 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 */ } />

玩得開心！