wordbreak.js (단어마다 끊어주는 플러그인)

jQuery word-break: keep-all 플러그인 ver 1.3.0 Demo

아래 버튼을 이용해 가로를 50px씩 늘리고 줄이면서 단어별로 끊어지는지 테스트해 보세요.

 

플러그인 적용 (applied)

다양한 태그에 테스트해 본 것입니다. Test target isvary tags.

이것은 span tag로 둘러싼 것입니다. 이것은 span tag로둘러싼 것입니다.

이것은 div tag로 둘러싼 것입니다. 이것은 div tag로둘러싼 것입니다. _{(자식 HTML이 있어도 작동하는 것을 보여줍니다.)}

이것은 h3 tag로 둘러싸고 중간에 줄바꿈이있는 것입니다. 이것은 h3 tag로 둘러싼것입니다.

이것은 p tag로 둘러싼 것입니다. 이것은 p tag로둘러싼 것입니다.

이것은 a tag로 둘러싼 것입니다. 이것은 a tag로둘러싼 것입니다.

• 이것은 li tag로 둘러싼 것입니다. 이것은 li tag로둘러싼 것입니다.

 

플러그인 미적용 (not apply)

다양한 태그에 테스트해 본 것입니다. Test target is vary tags.

이것은 span tag로 둘러싼 것입니다. 이것은 span tag로 둘러싼 것입니다.

이것은 div tag로 둘러싼 것입니다. 이것은 div tag로 둘러싼 것입니다.

이것은 h3 tag로 둘러싼 것입니다. 이것은 h3 tag로 둘러싼 것입니다.

이것은 p tag로 둘러싼 것입니다. 이것은 p tag로 둘러싼 것입니다.

이것은 a tag로 둘러싼 것입니다. 이것은 a tag로 둘러싼 것입니다.

• 이것은 li tag로 둘러싼 것입니다. 이것은 li tag로 둘러싼 것입니다.

실행 방법 (How to Run)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.word-break-keep-all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.target').wordBreakKeepAll();

	//IE에서는 플러그인을 사용하지 않고 CSS로 처리하고 싶은 경우 이렇게 옵션을 주면 된다.
	//$('.test').wordBreakKeepAll({OffForIE:true}); 

	//IE에서 플러그인을 사용하되 CSS를 적용하는 게 아니라 비 IE 브라우저처럼 적용하고 싶을 때 이렇게 옵션을 준다.
	//$('.test').wordBreakKeepAll({useCSSonIE: false});
});
</script>

플러그인 기타 정보 (etc)

제작: 안형우(mytory@gmail.com)

• 저작권은 jQuery와 같습니다. (License is http://jquery.org/license) 카피라이트 헤더에만 손대지 않으면 상업용·개인용 다 무료입니다.
• 프로젝트 홈(github)
• 오류를 보고해 주세요! (Please report error!)
• 인터넷 익스플러로의 경우 단어별로 줄바꿈을 하게 하는 CSS 프로퍼티가 있습니다. span, a 같은 display: inline 요소는 display:block으로 만든 후 word-break: keep-all; word-wrap: break-word;를 인라인 스타일로 추가해 줍니다.
• 나머지 브라우저의 경우 안의 단어들을 단어별로 span tag로 감싼 후 white-space: nowrap;을 인라인 스타일로 줘서 단어가 끊어지지 않게 합니다.
• 제작동기와 더 자세한 CSS 원리 설명은 블로그에 있습니다.
• Tested in IE7-9,Chrome20,FF12 (이건 폼으로;; IE6는 윈7이라 테스트하기 넘힘들다. 근데 이제 IE6는 테스트 안 해도 되겠지?)
• ver 1.2 부터 안에 태그가 있어도 작동합니다. 하지만 안에 태그가 없는 요소에 사용할 때 가장 훌륭하게 작동합니다. <, > 를 태그 외에 텍스트에 사용하지 않도록 주의하세요. 그런 경우 제대로 작동하지 않습니다. 예컨대, 태그에서 <레프트21&gt; 이렇게 쓰는 경우 브라우저는 <레프트21>이라고 제대로 렌더링하지만 이 플러그인은 오작동하게 됩니다.
• 태그와 딱 맞붙어 있는 글자에는 nowrap을 붙이지 않습니다. 아래와 같은 요소에 적용하도록 하는 데 많은 노력이 들기 때문에 아직 구현하지 못했습니다. 
  자료는 <a href="http://domain.com">여기에서 다운</a>받으세요. 
  위 코드 중 '여기에서'를 nowrap으로 둘러싸게 하고 싶다면, 태그와 글자 사이에 한 칸을 띄워 주시면 됩니다. 
  자료는 <a href="http://domain.com"> 여기에서 다운</a>받으세요. 
  그러나 이 플러그인을 이용해 '다운받으세요'를 nowrap으로 둘러쌀 방법은 현재로서는 없습니다.

출처 https://mytory.net/uploads/code/jquery-word-break-keep-all-plugin/example.html