Use JQuery. lettering. js to customize multi-line text styles and jquery custom events

Use JQuery. lettering. js to customize multi-line text styles and jquery custom events

A friend from an advertising company sent for help a few days ago, saying: "A project requires Dynamic Splitting of strings, and then different style effects are used for the split characters... ", I was a little indecisive when I heard this requirement. How can this problem be solved? I can handle it in five minutes at most ~~ So I typed a Demo Code directly on the browser console and sent it to this friend. Then I was complacent ..... five seconds later, I replied, "No, * & * ^ &*~~! @ ...... ", I realized that the vague demands really hurt me. I don't know what the blind ones are, and it's really hard to find out what the blind ones are ~~~

 

After a more detailed discussion, the requirement is summarized as follows: a random piece of English text is placed in a fixed-width container, and if there are multiple lines of text, the style of each line of text (such as font size and color) can be differentiated from other lines through CSS control. After the English text is changed, the above requirements can also be fulfilled.

 

The final effect may be like (the painting is too ugly ~) :

 

In this way, it is not necessary to extract every word in the string and then put it back into the container one by one. When a word has no shelter in the current row, it is forced to place it in the next row, and so on until the end. 

I suddenly remembered a JQuery-based plug-in called Lettering some time ago. js (Official Website: http://letteringjs.com/), can realize the intelligent split of English characters, can be achieved through the parameter split into line, word, character (char) operation, it is easy to use and concise, so I think the split and truncation work can be handed over to it, and I can focus on the line feed judgment operation.

 

Lettering. js official example website implementation method:

Use of HTML source code and Lettering. js:

 

The HTML structure after Lettering. js is used:

 

The analysis shows that:

1. Execute $ (". glass p "). after lettering ("lines"), wrap the text before and after each <br> label in an independent <span class = "line *"> </span>;

2. PerformWordSplit operations, such as: $ ('. line3'). lettering ('word ');

3. PerformCharacterSplit operations, such as: $ ('. line2'). lettering ();

3. PerformWord + characterSplit operations, such as $ ('. line1'). lettering ('word'). children ('span '). lettering ();

 

The difference between our goal and the above example is:

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

2. We do not need to further split words into characters;

3. How many lines of text do we have? This is an unknown number. It is not known until the last moment ~~~.

 

Our implementation:

Html container:

<div id="test" class="test-text">Here is the multiline English text of demonstration, the text here is dynamic and the style of each single line could be customized by CSS and different from others. </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:

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

 

So the key point of our implementation is: Line Break ~~~

As we have said before, our idea is to traverse the split words one by one and determine the line break by comparing the current word with the next word in the same line;

By determining the difference between offset (). top to determine whether it is the same, the JS Code is also very simple:

 1 $(document).ready(function(){ 2     var Dom = $("#test");     3     Dom.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             }10     });11 });

In this way, you can dynamically add <br> to wrap text ~~~

 

There is another question: how to customize the style of each line of text? Considering that my friend said, this effect only needs to be compatible with the latest Chrome browser. The first thing I thought was to use CSS3 and find all the line breaks. Isn't it easy?

 

Update JS as follows(Special Class names for line breaks are added):

 1 $(document).ready(function(){ 2     var Dom = $("#test");     3     var lineCount = 0; 4     Dom.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                 }    10             }11     });12 });

 

Add the following CSS:(This CSS implementation method is a bit SB and requires a maximum measurement to define the style of multiple rows. Here we only convey the idea and there are many implementation methods ~~):

.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;}

 

You can refer to my demo:

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

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