웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] jQuery Plugin To Split Text By Lines - SplitLines 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] jQuery Plugin To Split Text By Lines - SplitLines

해피CGI윤실장 2024. 3. 5. 09:14

SplitLines는 상자의 너비 또는 함수에 전달된 너비를 기반으로
특정 html 태그를 사용하여 텍스트 블록을 별도의 줄로 분할할 수 있는 경량 jQuery 플러그인입니다.
그런 다음 각 선의 스타일을 개별적으로 지정하고 애니메이션을 적용할 수 있습니다.

첨부된 파일의 압축을 해제하고,
demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.


작동원리는 아래와 같습니다.

1). 내용을 단어로 분할하여 원래 Html 태그를 유지합니다. 이 태그는 *each* 단어에 해당 단어가 있는 태그와 함께 태그를 지정하므로 래핑이 시작될 때 태그는 그대로 유지됩니다. 이것은 스타일에 영향을 미칠 수 있습니다 (예 : 여백이 있으면 각 단어가 해당 스타일을 상속합니다).
2). 단어를 공백으로 나눕니다.
3). 태그와 래퍼를 사용하여 html 형식을 지정합니다.




빨간색 공간안에 글자를 나누어서 배치시켜 줍니다.




사용방법은 아래와 같습니다.





 

 

 

Comments