react dynamic font

React-Dynamic-Font

นี่คือองค์ประกอบปฏิกิริยาที่ทำให้ข้อความของคุณไม่ห่อและปรับขนาดตัวอักษรแบบไดนามิก

บางครั้งเราต้องการให้ข้อความมีความกว้างคงที่และจะลดขนาดตัวอักษรโดยอัตโนมัติเมื่อจำนวนอักขระมีขนาดใหญ่เกินไปเพื่อให้ข้อความอยู่ในบรรทัดเดียวโดยไม่ต้องห่อ นี่คือเหตุผลที่ฉันสร้างองค์ประกอบนี้

การสาธิตสดง่ายๆ

เล่นและติดตั้งด้วยบิต

การติดตั้ง

 npm install react-dynamic-font --save

หรือ

 yarn add react-dynamic-font

แพ็คเกจนี้ต้องใช้ React v16.3 หรือสูงกว่าหากคุณต้องการใช้ในเวอร์ชัน React ที่ต่ำกว่า (v15.x-v16.2.x) ลองใช้ yarn add react-dynamic-font@^1.0.0 สำหรับ React 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 */ } />

มีความสุข!