[ css ] textFit 간편한 텍스트 피팅(입히기) > html&css

 한 줄 및 여러줄의 텍스트를 해당 컨테이너의 너비 및 높이에 빠르게 맞추는 종속성없는 텍스트 크기 조정 요소

 

●기능

  = textFit :

    - 빠른 속도로 바이너리 검색을 사용하여 텍스트를 컨테이너에 신속하게 맞춰 log n대부분의 솔루션보다 훨씬 빠릅니다.

    - 가장 적합 <1ms합니다. 구현 세부 정보를 참조 하십시오 .

    - 종속성이 없습니다.

    - 작은. 4.1KB축소 및 1.5KBgzipped.

    - 최대의 정확성을 위해 Flexbox로 수평 및 수직 가운데정렬을 모두 지원합니다.

    - 모든 글꼴, 패딩 및 여러 줄 문자를 지원합니다.

    - 브라우저 지원

        textFitIE9 +, Firefox, Chrome, Opera 및 대부분의 모바일 브라우저를 지원합니다. 비 호환성을 발견하면 문제를 제기하십시오.

        IE <= 8 지원이 필요하면 jQuery 버전을 사용하십시오 . 기능은 v1.0과 v2.0에서 동일하지만 유일한 변화는 jQuery 종속성 제거였습니다.

 

기능

textFit :

    - 빠른 속도로 바이너리 검색을 사용하여 텍스트를 컨테이너에 신속하게 맞춰 log n대부분의 솔루션보다 훨씬 빠릅니다.

    - 가장 적합 <1ms합니다. 구현 세부 정보를 참조 하십시오 .

    - 종속성이 없습니다.

    - 작은. 4.1KB축소 및 1.5KBgzipped.

    - 최대의 정확성을 위해 Flexbox로 수평 및 수직 가운데정렬을 모두 지원합니다.

    - 모든 글꼴, 패딩 및 여러 줄 문자를 지원합니다.

    - 브라우저 지원

        textFitIE9 +, Firefox, Chrome, Opera 및 대부분의 모바일 브라우저를 지원합니다. 비 호환성을 발견하면 문제를 제기하십시오.

        IE <= 8 지원이 필요하면 jQuery 버전을 사용하십시오 . 기능은 v1.0과 v2.0에서 동일하지만 유일한 변화는 jQuery 종속성 제거였습니다.

사용법

[code]

<div class="box" style="width:300px;height:300px">

  Fit me, I am some text

</div>

// textFit accepts arrays

textFit(document.getElementsByClassName('box'));

// or single DOM elements

textFit(document.getElementsByClassName('box')[0]);

// Use jQuery selectors if you like.

textFit($('#box')[0])

[/code]

텍스트는 상자의 수평 또는 수직 경계에 도달 할 때까지 확장됩니다. 텍스트를 맞추려면 명시적인 너비 및 높이 스타일이 필요합니다.

고급 사용

여러 줄

텍스트에 여러 줄이 있으면 textFit ()이 자동으로이를 감지하고 공백을 사용하지 않습니다. 변경 작업은 필요 없습니다.

[code]

<div class="box" style="width:300px;height:300px">

  This text <br>

  Has multiple lines <br>

  Fit me!

</div>

textFit(document.getElementsByClassName('box'))

[/code]

어떤 이유로 자동 감지 기능이 작동하지 않는 경우 다음을 사용하여 멀티 라인 피팅을 명시 적으로 켜십시오.

[code]

textFit(document.getElementsByClassName('box'), {multiLine: true})

[/code]

수평 / 수직 센터링

[code]

<div class="box" style="width:300px;height:300px">

  This text <br>

  Has multiple lines <br>

  And wants to be centered horizontally and vertically<br>

  Fit me!

</div>

textFit(document.getElementsByClassName('box'), {alignHoriz: true, alignVert: true})

[/code]

최소 및 최대 크기

때로는 텍스트가 매우 짧거나 매우 긴 경우 상태가 양호한 상태로 유지되도록하려는 경우가 있습니다. textFit에서 다뤘습니다.

[code]

<div class="box" style="width:300px;height:300px">

  Short Text

</div>

textFit(document.getElementsByClassName('box'), {minFontSize:10, maxFontSize: 50})

[/code]

구현 세부 사항

textFit는 텍스트의 합당한 최소 및 최대 범위를 결정합니다. 기본값은 다음과 같습니다.

다양한 글꼴, 선 높이 및 문자 간격으로 정확한 결과를 보장하기 위해 textFit은 가능한 정확하게 상자에 맞을 때까지 텍스트의 크기를 조정합니다. 비슷한 많은 플러그인과는 달리, textFit은 바이너리 검색 을 사용 하여 정확한 적합성을 찾습니다. 이로 인해 프로세스 속도가 크게 빨라집니다. textFit은 프로덕션 웹 사이트에서 사용할 수있을만큼 빠릅니다.

textFit()동기 함수입니다. 이 때문에 렌더 스레드는 완료 될 때까지 레이아웃을 수행 할 기회가 없으므로 크기 조정은 보이지 않아야합니다. 일반적인 처리 시간은 1ms 미만이어야하며 렌더링을 크게 차단해서는 안됩니다.

기본 설정

소스에서 참조 용으로 :

[code]

settings = {

    alignVert: false, // if true, textFit will align vertically using css tables

    alignHoriz: false, // if true, textFit will set text-align: center

    multiLine: false, // if true, textFit will not set white-space: no-wrap

    detectMultiLine: true, // disable to turn off automatic multi-line sensing

    minFontSize: 6,

    maxFontSize: 80,

    reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance

    widthOnly: false, // if true, textFit will fit text to element width, regardless of text height

    alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment

};

[/code]

License

MIT 

추천0 비추천0