[해피CGI][cgimall] Limit Text Length To A Specific Number Of Lines - Read More

다운로드 받은 파일의 압축을 해제한 후,
index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다.

 

여러줄로 구성된 텍스트를 일부만 화면에 표시해주고,
표시되는 끝 부분에 read more 버튼을 표시해줍니다.

더 보기 버튼을 클릭하면,

 

나머지 텍스트를 화면에 스르륵 표시를 해주는
jquery 플러그인 입니다.


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

1. jquery 와 더보기 플러그인을 로드합니다.

 

2. 텍스트가 출력되어야 할 블록을 연결하고, 몇줄을 자르고 표시할지를 지정합니다.

 

3. 더보기 버튼을 클릭하면 화면에 나머지 텍스트를 표시하는 효과를 주려면 텍스트를 출력하는 블록에
data-controller 이라는 속성을 추가하고, 버튼과 연결하면 됩니다.

 

4. 더보기 버튼을 조절하거나,
더보기 할 텍스트가 있음을 표시하는 구간을 조절하는 것은 아래와 같은 코드로 설정하는게 가능합니다.

 

화면에 표시해야할 텍스트는 많지만,
화면공간이 좁은 경우 쉽게 활용하기가 좋을듯 하네요.