[해피CGI][cgimall] 스마트한 jQuery 반응형 텍스트 플러그인 - TextTailor.js

- 소개

TextTailor.js는 반응형 웹 레이아웃을 위해 설계된 jQuery 플러그인으로, 텍스트가 부모 컨테이너에 맞도록 글꼴 크기를 자동으로 조정합니다.

이 플러그인은 텍스트가 부모 컨테이너의 높이(고정 또는 백분율)에 맞지 않을 경우, 넘치는 텍스트를 말줄임표(…)를 사용하여 숨기는 기능도 제공합니다.

 

- 라이센스

MIT





- 사용 방법


1. CDN에서 최신 버전의 jQuery 라이브러리를 로드하고 반응형 웹페이지 하단에 jQuery texttailor.js 파일을 추가하세요.

2. 텍스트를 컨테이너 요소로 감싸세요.

3. CSS에서 컨테이너 요소에 높이(고정 또는 백분율)를 지정합니다.

4.  반응형 텍스트를 활성화하려면 컨테이너에서 플러그인을 호출합니다.

5.  이용 가능한 옵션.

•  minFont: 1최소 글꼴 크기 (fit: true와 함께 사용)
•  maxFont: 9999: 최대 글꼴 크기 (fit: true와 함께 사용)
•  preWrapText: false: CSS 추가 -> 공백: 줄바꿈 전
•  lineHeight: 1.45: 줄높이 속성
•  resizable: true창 크기 조정 시 다시 맞춤 설정
•  debounce: false: resizable: true와 함께 사용
•  fit: true텍스트를 부모 요소의 높이와 너비에 맞춥니다.
•  ellipsis: true텍스트가 한 칸에 들어가지 않으면 생략 부호(…)를 사용하세요.
•  center: false부모를 기준으로 한 절대 중심
•  justify: false: CSS 추가 -> text-align: justify

- 작동 화면