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

본문 바로가기
사이트 내 전체검색

html

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

페이지 정보

작성자 웹지기 댓글 0건 조회 1,471회 작성일 18-10-23 10:45

본문

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

 

●기능

  = 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

댓글목록

등록된 댓글이 없습니다.

Total 66건 1 페이지
  • 66 [ javascript ] 변수 명명 규칙, 표기법
  • 캐멀 표기법(로어 캐멀 표기법) newName createLifeGame 파스칼 표기법(어퍼 캐멀 표기법) NewName CreateLifeGame 밑줄 표기법(스네이크 표기법) new_name create_life_game 변수 이름을 지을 때 일반적으로 사용하는 표기법 - 캐멀 표기법, 밑줄표기법으로 변수의 의미를 파악할 수 있게 명명 - 기본적으로 영어로 사용 - 루프 카운터 변수는 i, j, k 등을 사용 -...
  • 웹지기 06-04 111 0 0 댓글 0
  • 64 [ javascript ] The Console Object 콘솔 객체 console.log console.…
  • console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공한다. 동작 방식은 브라우저마다 다르지만, 사실상 표준으로 여겨지는 기능도 여러있다. console 객체는 아무 전역 객체에서나 접근가능하다. console.assert() 첫 번째 매개변수가false인 경우 메시지와스택 추적을 출력합니다. console.clear() 콘솔의 내용을...
  • 웹지기 04-11 222 0 0 댓글 0
  • 62 [ html ] 특수문자 코드표
  • 표현문자 숫자표현 문자표현 설명 - &amp;#00; - &amp;#08; - 사용하지 않음 space &amp;#09; - 수평탭 ...
  • 웹지기 07-31 1036 0 0 댓글 0
  • 60 [ jquery ] 소숫점 콤마 동시사용 플러그인
  • jQuery Number Plugin By Sam Sehnert, Custom D 2015 This is a jQuery plugin which allows developers to easily format numbers for display use. Allows users to replace numbers inline in a document, or return a formatted number for other uses. Requires jQuery 1.6 or greater. ...
  • 웹지기 09-07 2862 0 0 댓글 0
  • 59 제목이나 내용이 거꾸러 보이게 하기 위한 태그(?) 인가(?)
  • 아파치님이 그누보드에 올려놓은걸 메모하려고 적습니다. [code] &amp;#8238; 제목이나 내용부분에 이렇게 하고 적으면 글이 거꾸로 보인다고 하네요. ㅎㅎㅎ 보여주기위해 코드에 적습니다. [/code] 제 게시판에는 적용이 안되는군요 ㅋㅋㅋ
  • 웹지기 11-27 1072 0 0 댓글 0
  • 56 [ css ] keyframe - css 애니메이션 기능 적용해보기
  • keyframe - css 애니메이션 기능 적용해보기 html &lt;p&gt;동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라 만세&lt;/p&gt; css p { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-lef...
  • 웹지기 11-23 1618 0 0 댓글 0
  • 열람중 [ css ] textFit 간편한 텍스트 피팅(입히기)
  • 한 줄 및 여러줄의 텍스트를 해당 컨테이너의 너비 및 높이에 빠르게 맞추는 종속성없는 텍스트 크기 조정 요소 ●기능 = textFit : - 빠른 속도로 바이너리 검색을 사용하여 텍스트를 컨테이너에 신속하게 맞춰 log n대부분의 솔루션보다 훨씬 빠릅니다. - 가장 적합 &lt;1ms합니다. 구현 세부 정보를 참조 하십시오 . - 종속성이 없습니다. - 작은. 4.1KB축소 및 1.5KBgzipped. - 최대의 정확성을 위해 Flexbox로 수평 ...
  • 웹지기 10-23 1472 0 0 댓글 0
게시물 검색

회원로그인

접속자집계

오늘
443
어제
4,111
최대
24,117
전체
694,433

그누보드5
Copyright © funyphp.com. All rights reserved.