customizing multi-line text styles with JQuery.lettering.js

A few days ago, a friend in the advertising agency asked for help, said: "There is a project requires the implementation of the string dynamic split, and then split the characters using different style effects ...", hear this demand, I have a little disdain, what can, up to five minutes to finish AH ~ ~ So I hit a demo code directly in the browser console to send this friend, and then smug ..... Five seconds later, replied I said: "No, *&*^&*[email protected]", I realized that the fuzzy demand is really a TMD harm oneself ah, do not understand the need to blind hands to eat AH ~ ~ ~ ~ ~ ~

After a more detailed communication, the summary of his needs is this: a random English text in a fixed-width container, and text if there are multiple lines, the style of each line of text (such as: Font size, color, etc.) can be controlled by CSS and other lines of style to distinguish; When the English text changes, These requirements can also be achieved.

The final effect may be (too ugly to draw):  

Would it not be necessary to truncate each word in the string, and then put it back in the container one after the other, forcing the word to be placed on the next line, and so on until the end, when there is no shelter in the current line.  

Suddenly recalled a time ago saw a jquery-based plug-in, called Lettering.js (official website:http://letteringjs.com/), you can implement the English character of the intelligent split, can be separated by the parameter implementation of the line ( Line), Word (word), character (char) operation, the use is very convenient and concise, then I think, this split interception work can be given to it to complete, I can focus on the change of the judgment operation.

Lettering.js Official One example website implementation method:

HTML source code and the use of lettering.js:

After using the Lettering.js HTML structure:

Through analysis, you can see:

1. Execute $ (". Glass P") in JS code. After lettering ("lines"), wrap the text before and after each <br> label in a separate <span class= "line*" ></ In span>;

2, the word split operations on the line, such as: $ ('. Line3 '). Lettering (' words ');

3. Perform character split operations on lines such as: $ ('. Line2 '). lettering ();

3. The word + character split operation on the line, such as: $ ('. Line1 '). Lettering (' words '). Children (' span '). lettering ();

And the difference between the goals we're trying to achieve and the example above is:

1, we do not manually wrap the text in advance (that is: Do not manually add <br>, because do not know where to add <br>~~~);

2, we do not need to further break the word into characters;

3. How many lines of text will we have? This is an unknown, until the last moment to know ~ ~ ~.

Our implementation:

HTML container:

<id= "Test"  class= "Test-text"></  div>

HTML container style:

. Test-text{font-family:"Aleo Regular", "Palatino Linotype", Palatino;width:500px;margin:0 Auto;background:#ecfeff;Color:#f60;font-size:24px;padding:25px;Line-height:1.667;Word-wrap:Break-word;Word-break:Break-all;Text-shadow:0 1px 1px rgba (0,0,0,.5);}

JS Reference:

<src= "Http://http://code.jquery.com/jquery-1.10.1.js"></  Script><src= "Https://github.com/downloads/davatron5000/ Lettering.js/jquery.lettering-0.6.1.min.js "></script>

So the main point we achieved is: line-changing points ~ ~ ~

As I said before, our idea is to iterate through the words that have been broken, and to determine the line-breaking point by comparing whether the current word is in the same line as the next word.

By judging the difference of offset () top to determine whether to peer, the JS code is also simple:

1$ (document). Ready (function(){2     varDom = $ ("#test"); 3Dom.lettering (' words '). Children (' span '). each (function(){4         var$ This= $( This), Next = $ This. Next (); 5             if(next.length!=0){6                 if( Math.Abs (Next.offset (). top-$this. Offset (). top) > 5  ){7$ This. After ("<br/>"); 8                 }    9             }Ten     }); One});

This way you can dynamically add <br> to wrap the text ~ ~ ~

One more question, how do you differentiate the style of each line of text from the custom? In view of my friend said that this effect only need to be compatible with the latest Chrome browser, I first think of the implementation with CSS3, the line has been found, it is not easy?

Update JS as follows (special class name with line break added):

1$ (document). Ready (function(){2     varDom = $ ("#test"); 3     var linecount = 0;4Dom.lettering (' words '). Children (' span '). addclass ("word"). each (function(){5         var$ This= $( This), Next = $ This. Next (); 6             if(next.length!=0){7                 if(Math.Abs (Next.offset (). Top-$ This. Offset (). top) > 5 ){8$ This. addclass ("break-point-" + (++linecount)). After ("<br/>"); 9                 }    Ten             } One     }); A});

Add the following CSS as follows (this CSS implementation is a bit of SB, need to define the most large number of lines of style, here is just to convey the idea, there are many ways to achieve ~ ~):

. Test-text. Word{Display:Inline-block; }. Test-text. break-point-1 ~ span{font-size:30px;Color:#333;}. Test-text. break-point-2 ~ span{Color:#036;font-size:15px;}. Test-text. break-point-3 ~ span{Color:#FC0;font-size:22px;}. Test-text. break-point-4 ~ span{Color:#090;font-size:18px;}. Test-text. break-point-5 ~ span{font-size:26px;Color:#930;}. Test-text. break-point-6 ~ span{Color:#93C;font-size:34px;}. Test-text. break-point-7 ~ span{Color:#f60;font-size:38px;}. Test-text. break-point-8 ~ span{Color:#002569;font-size:46px;}. Test-text. break-point-9 ~ span{font-size:10px;Color:Darkgreen;}. Test-text. break-point-10 ~ span{Color:LightBlue;font-size:33px;}. Test-text. break-point-11 ~ span{Color:Yellow;font-size:16px;}. Test-text. break-point-12 ~ span{Color:Green;font-size:16px;}. Test-text. break-point-13 ~ span{Color:Ruby;font-size:14px;}. Test-text. break-point-14 ~ span{Color:Purple;font-size:11px;}. Test-text. break-point-15 ~ span{Color:Pink;font-size:12px;}. Test-text. break-point-16 ~ span{Color:Gray;font-size:16px;}

can refer to the demo I do:

http://jsfiddle.net/divayang/697ynekh/

http://jsfiddle.net/divayang/697ynekh/5/

customizing multi-line text styles with JQuery.lettering.js