Question

我正在尝试手动换行覆盖图像的文本。目前我有一个文本输入框，用户可以在其中键入一个句子，覆盖文本会更新每个按键上显示的文本。叠加文本使用文本转换来曲线和重新整形文本，因此它不会自动换行到新行。并且输入字段是大于包裹切断长度的固定尺寸。

如果文本超过10个字符，我试图打破一个新行，但这并不能说明它是否在一个单词的中间。如何检测最后一个单词的结尾并在那里中断呢？

感谢您的帮助。

$("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);
});

宽度无法添加到重叠的文本中，因为它会像螺旋一样循环，然后重新进入自身。遗憾的是，宽度对文本没有包装效果。

Answer 1

试试这个解决方案。希望它有所帮助

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>");

Answer 2

// 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 );

jsFiddle

表现（基于5段Lorem ipsum）：
我的功能：大约1ms左右 Twister0k：大约5-7ms

当只使用小字符串时，这不会是一个问题，但如果您有大字符串，或者您经常使用此功能，则可能需要切换到此功能。

Answer 3

尝试使用CSS。只需向width元素添加一些p.overlay，它就会自动换行文本。您还可以使用其他css属性进行包装。例如，使用自动换行（http://www.w3schools.com/cssref/css3_pr_word-wrap.asp）或空格（http://www.w3schools.com/cssref/pr_text_white-space.asp）。

jquery / javascript手动包装文本

3 个答案: