2

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.

Improve this question

3 Answers 3

Reset to default
1

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>");
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

amazing thanks, works great and all perfectly wrapped in a clean function!
Quite a complex function, this can be done easier :) But it works... May I suggest to add comments to explain the code a bit. Might help (JS-)beginners better
1 
// 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.

Improve this answer

Comments

0

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).

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.