diff --git a/example.html b/example.html index 89c14e9..6d14fed 100644 --- a/example.html +++ b/example.html @@ -4,16 +4,17 @@ jQuery word-break:keep-all Plugin - - - + -

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

+

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

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

@@ -104,8 +105,12 @@

실행 방법 (How to Run)

<script type="text/javascript"> $(document).ready(function(){ $('.target').wordBreakKeepAll(); + //IE에서는 플러그인을 사용하지 않고 CSS로 처리하고 싶은 경우 이렇게 옵션을 주면 된다. //$('.test').wordBreakKeepAll({OffForIE:true}); + + //IE에서 플러그인을 사용하되 CSS를 적용하는 게 아니라 비 IE 브라우저처럼 적용하고 싶을 때 이렇게 옵션을 준다. + //$('.test').wordBreakKeepAll({useCSSonIE: false}); }); </script>

플러그인 기타 정보 (etc)

@@ -151,9 +156,6 @@

플러그인 기타 정보 (etc)

//안에 html 요소가 있을 때 에러 안 나는지 테스트. $('.has-html-test').wordBreakKeepAll(); - - //code highlight - hljs.initHighlightingOnLoad(); \ No newline at end of file diff --git a/jquery.word-break-keep-all.js b/jquery.word-break-keep-all.js index 396aafa..9e63ad4 100644 --- a/jquery.word-break-keep-all.js +++ b/jquery.word-break-keep-all.js @@ -1,15 +1,15 @@ /*! * jQuery word-break keep-all Plugin - * ver 1.2.3 + * ver 1.3.0 * * Copyright 2012, Ahn Hyoung-woo (mytory@gmail.com) * Dual licensed under the MIT or GPL Version 2 licenses. * http://jquery.org/license * - * http://code.google.com/p/jquery-word-break-keep-all-plugin/ + * https://github.com/mytory/jquery-word-break-keep-all * http://mytory.co.kr/archives/2801 * - * Date: 2013-01-07 + * Date: 2013-09-04 */ jQuery.fn.wordBreakKeepAll = function(option) { @@ -27,32 +27,34 @@ jQuery.fn.wordBreakKeepAll = function(option) { }; var defaultOption = { - OffForIE: false // If IE, turn off plugin. + OffForIE: false, // If IE, turn off plugin. + useCSSonIE: true // on IE, use CSS word-break: keep-all }; var opt = $.extend(defaultOption,option); - if( /MSIE/.test(navigator.userAgent) ){ + if( /MSIE/.test(navigator.userAgent) && opt.OffForIE == false && opt.useCSSonIE == true){ var addWordBreakKeepAll = function(obj){ - if(opt.OffForIE == false){ - $(obj).css({ - 'word-break': 'keep-all', - 'word-wrap': 'break-word' - }); - if($(obj).css('display') == 'inline'){ - $(obj).css('display','block'); - } + $(obj).css({ + 'word-break': 'keep-all', + 'word-wrap': 'break-word' + }); + if($(obj).css('display') == 'inline'){ + $(obj).css('display','block'); } }; - }else{ + }else if( ! /MSIE/.test(navigator.userAgent) || /MSIE/.test(navigator.userAgent) && opt.OffForIE == false && opt.useCSSonIE == false ){ var addWordBreakKeepAll = function(obj){ var html = $(obj).html(); - //줄바꿈 보존을 위한 처리 + + // to store line break html = html.replace(/(\r\n|\n|\r)/gm, ' ＃＆＊＠§ '); + // .html() 로 집어 넣었을 때, 여는 태그만 있으면 브라우저가 자동으로 닫는 태그를 집어 넣기 때문에 <,>를 다 없앤다. var textArr = html.split(' '); - //빈 배열 제거 + + // remove empty array textArr = textArr.filter(function(e){return e;}); $(obj).text(''); var skip = false; @@ -83,7 +85,7 @@ jQuery.fn.wordBreakKeepAll = function(option) { } if(is_there_end_angle_bracket(str)){ skip = false; - } + } }; $(obj).html(full_str.replace(/＃＆＊＠§/g, "\n")); }; diff --git a/jquery.word-break-keep-all.min.js b/jquery.word-break-keep-all.min.js index dbead68..66c42e9 100644 --- a/jquery.word-break-keep-all.min.js +++ b/jquery.word-break-keep-all.min.js @@ -1,2 +1,16 @@ -//ver 1.2.3, http://code.google.com/p/jquery-word-break-keep-all-plugin/ -jQuery.fn.wordBreakKeepAll=function(e){var t=function(e){return e.lastIndexOf("<")")};var n=function(e){return e.lastIndexOf(">")")==e.lastIndexOf("<")};var i={OffForIE:false};var s=$.extend(i,e);if(/MSIE/.test(navigator.userAgent)){var o=function(e){if(s.OffForIE==false){$(e).css({"word-break":"keep-all","word-wrap":"break-word"});if($(e).css("display")=="inline"){$(e).css("display","block")}}}}else{var o=function(e){var i=$(e).html();i=i.replace(/(\r\n|\n|\r)/gm," ＃＆＊＠§ ");var s=i.split(" ");s=s.filter(function(e){return e});$(e).text("");var o=false;var u="";for(var a=0,f=s.length;a'+l+" "}else{u+=l+" "}if(n(l)){o=true}if(t(l)){o=false}}$(e).html(u.replace(/＃＆＊＠§/g,"\n"))}}return this.each(function(){o(this)})} \ No newline at end of file +/*! + jQuery word-break keep-all Plugin + ver 1.3.0 + + Copyright 2012, Ahn Hyoung-woo (mytory@gmail.com) + Dual licensed under the MIT or GPL Version 2 licenses. + http://jquery.org/license + + https://github.com/mytory/jquery-word-break-keep-all + http://mytory.co.kr/archives/2801 + + Date: 2013-09-04 + */jQuery.fn.wordBreakKeepAll=function(option){var is_there_end_angle_bracket=function(str){return str.lastIndexOf('<')');};var is_there_start_angle_bracket=function(str){return str.lastIndexOf('>')')==str.lastIndexOf('<');};var defaultOption={OffForIE:false,useCSSonIE:true};var opt=$.extend(defaultOption,option);if(/MSIE/.test(navigator.userAgent)&&opt.OffForIE==false&&opt.useCSSonIE==true){var addWordBreakKeepAll=function(obj){$(obj).css({'word-break':'keep-all','word-wrap':'break-word'});if($(obj).css('display')=='inline'){$(obj).css('display','block');}};}else if(!/MSIE/.test(navigator.userAgent)||/MSIE/.test(navigator.userAgent)&&opt.OffForIE==false&&opt.useCSSonIE==false){var addWordBreakKeepAll=function(obj){var html=$(obj).html();html=html.replace(/(\r\n|\n|\r)/gm,' ＃＆＊＠§ ');var textArr=html.split(' ');textArr=textArr.filter(function(e){return e;});$(obj).text('');var skip=false;var full_str='';for(var i=0,j=textArr.length;i'+str+' ';}else{full_str+=str+' ';} +if(is_there_start_angle_bracket(str)){skip=true;} +if(is_there_end_angle_bracket(str)){skip=false;}};$(obj).html(full_str.replace(/＃＆＊＠§/g,"\n"));};} +return this.each(function(){addWordBreakKeepAll(this);});}; \ No newline at end of file diff --git a/readme.md b/readme.md index 930c366..4560fc3 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,5 @@ -# jQuery `word-break: keep-all` plugin +jQuery `word-break: keep-all` plugin +==================================== Not in latin letter, break line by a word, not a letter. This is like CSS `word-break: keep-all` property that only be in IE. @@ -16,6 +17,26 @@ What we want is below. Not above. ('죽였다' is a word.) This plugin is for it. IE has CSS property `word-break: keep-all;` but other browser has not. So I made jQuery plugin. +Usage +----- + + + + + 영어가 아닌 문자에서, 글자별로 줄바꿈하는 것이 아니라 단어별로 줄바꿈을 하도록 한다. CSS의 `word-break: keep-all`처럼 작동을 한다. 이 프로퍼티는 IE에만 있다. [▶데모 보기](http://dl.dropboxusercontent.com/u/15546257/code/jquery-word-break-keep-all-plugin/example.html) | @@ -31,4 +52,5 @@ This plugin is for it. IE has CSS property `word-break: keep-all;` but other bro 이명박과 마힌드라가 22명을 죽였다. -이걸 해 주는 jQuery 플러그인이다. IE에서는 word-break: keep-all; 속성으로 처리 가능하지만, IE가 아닌 브라우저에서는 이 속성이 작동하지 않는다. 그래서 jQuery 플러그인을 만들었다. \ No newline at end of file +이걸 해 주는 jQuery 플러그인이다. IE에서는 word-break: keep-all; 속성으로 처리 가능하지만, IE가 아닌 브라우저에서는 이 속성이 작동하지 않는다. 그래서 jQuery 플러그인을 만들었다. +