CODEWITHSUNDEEP
javascriptjquery
kai Taylor
kai Taylor

Reputation: 795

jquery/javascript manually wrapping text

I am trying to manually wrap text that overlays an image. At the moment I have a text input box where the user can type a sentence, the overlay text updates the displayed text on each key up press. The overlay text is using text transformations to curve and reshape the text, so it will not auto wrap to a new line. And the input field is a fixed size larger than the wrapping cut off length.

I have tried to break for a new line if the text is over 10 characters, but this doesn't account for if it is in the middle of a word. How can I detect the end of the last word and break there instead?

Thanks for any help.

$("input[name='text']").keyup(function(event) {

    var text = $(this).val();

    var breakText = '';
    while (text.length > 0) {
      breakText += text.substring(0, 10) + '\n';
      text = text.substring(10);
    }

    $("p.overlay").html(breakText);
});

A width cannot be added to the overlaid text because it loops in a circle like a spiral and goes back in on itself. The width has no wrapping effect on the text unfortunately.

Upvotes: 2

Views: 554

Answers (3)

Martijn
Martijn

Reputation: 16103

// A function to make inserting easier:
function insertAt(text, index, insert) {
    return text.substr(0, index) + insert + text.substr(index+1); // +1 to make space go away
}

var someString = "My dog has fleas the quick brown fox jumps over the lazy dog etc.";
var currentOffset = 0; // Startposition of the pointer
var lineLength = 10; // How long you want each line to be
while( currentOffset+lineLength < someString.length ){
    // Find the space in a small subset of the string, and add a newline
    spacePosition = someString.substr(currentOffset,lineLength).lastIndexOf(' ')
    someString = insertAt(someString, currentOffset+spacePosition, '\n')

    currentOffset+= spacePosition+2; // 2 for '\n'
}

console.log('result: \n'+ someString );

And the jsFiddle

Performance (based on 5 paragraphs Lorem ipsum):
My function: around 1ms
Twister0k: about 5-7ms

This will not be an issue when just working in small string, but if you have big strings, or you use this functionality a lot, you might want to switch to this function.

Upvotes: 1

Artem Kyba
Artem Kyba

Reputation: 885

Try this solution. Hope it helps

function explode(text, max) {
    text = text.replace(/  +/g, " ").replace(/^ /, "").replace(/ $/, "");
    if (typeof text === "undefined") return "";
    if (typeof max === "undefined") max = 10;
    if (text.length <= max) return text;
    var exploded = text.substring(0, max);
    text = text.substring(max);
    if (text.charAt(0) !== " ") {
        while (exploded.charAt(exploded.length - 1) !== " " && exploded.length > 0) {
            text = exploded.charAt(exploded.length - 1) + text;
            exploded = exploded.substring(0, exploded.length - 1);
        }
        if (exploded.length == 0) {
            exploded = text.substring(0, max);
            text = text.substring(max);
        } else {
            exploded = exploded.substring(0, exploded.length - 1);
        }
    } else {
        text = text.substring(1);
    }
    return exploded + "\n" + explode(text);
}

var text = "My dog has fleas the quick brown fox jumps over the lazy dog etc.";
var exploded = explode(text);

document.write("<pre>");
document.write(exploded);
document.write("</pre>");

Upvotes: 1

bbahov
bbahov

Reputation: 109

Try using CSS. Just add some width to the p.overlay element and it will automatically wrap the text. You can also play around with other css properties for wrapping. For example use word-wrap (http://www.w3schools.com/cssref/css3_pr_word-wrap.asp) or white-space (http://www.w3schools.com/cssref/pr_text_white-space.asp).

Upvotes: 0

Related Questions