Click here to Skip to main content
12,697,311 members (28,542 online)
Rate this:
Please Sign up or sign in to vote.
See more: jQuery
I used these lines of code for highlighting my sentences,every thins is OK but i want to highlight line by line(this code highlight all lines in span tag together)
JavaScript Code

  var seconds = 5;
  var el = $('span#test');
  var width = el.outerWidth();
  var height = el.outerHeight();
  var wrapper = $('<span>').css({
    width: width + 'px',
    height: height + 'px',
    position: 'relative'
  var background = $('<span>').css({
    width: 0,
    height: height + 'px',
    position: 'absolute',
    background: '#0f0'
  background.animate({width: '+=' + width},1000*seconds);


I know i can do it by spiting it's to words(like this:[^]) but i used custom font.

please help!
Posted 25-Aug-12 23:56pm
Updated 25-Aug-12 23:59pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

To highlight paragraph line by line you need to split the paragraph into lines first and then simply highlight the lines. To split the paragraph into lines you can re-build the paragraph word by word and end the line when it wraps on a second line, then start a new line.


Is that what you wanted?

    $("#test span").each(function(i,e) {
        $(e).delay(i*((5000)/$("#test span").length)).animate({'background-color': '#0f0'}, 100);

function splitTextIntoLines(obj) {
    var lineHeight = null;
        words = obj.text().split(" ").reverse(),
        lines = [],
        line = "",
        word = "";
    // clear the paragraph
    // add word by word to the paragraph
    // the array of words is reversed, so that pop() will get the first word
    while(words.length > 0) {
        word = words.pop();
        // add the first word back to paragraph
        obj.append(word + " ");
        // measure the line height on the first word
        if(lineHeight === null) {
            lineHeight = obj.height();
        // if the paragraph wraps to a second line (line height is bigger)...
        if(obj.height() > lineHeight) {
            // ...put the last word back to the array
            // and store the one line in another array of lines
            line = obj.html();
            obj.html(line.substring(0, line.length - word.length - 1));
    // add the last line (doesn't wrap on to a second line)
    // add all lines back to the paragraph    

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170118.1 | Last Updated 1 Sep 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100