7

DIV などの HTML 要素内に長いテキストを追加すると、要素はそのテキストをラップします。実際、この質問テキストとまったく同じです。このような HTML 要素からテキストを取得し、それがどこで壊れているかを判断するにはどうすればよいですか? つまり、新しい行が挿入される場所です。

たとえば、このボックスでは、"...like this" の後に新しい行があり、"...where it" の後に 1 行、"...is insert" の後に 2 行あります。

4

2 に答える 2

2

したがって、問題は実際にはHTML5キャンバスでワードラップを行う方法です。

これはすべて、テキストや写真を保持するいくつかの標準的なHTML要素をHTML5キャンバスに変換するためのものです。残念ながら、「。fillText（）」メソッドはテキストの一部を壊すほど賢くないので、各行を「手動で」検出する必要があります。

measureTextその後、一度に1つの単語を追加します。最初の単語を測定し、それがコンテナの幅（ctx2d.measureText(words).width <= containerWidth）に収まる場合は、別の単語を追加して再度測定できます。単語の文字列が収まらないまで。そうでない場合はfillText、次の行に進む必要があります。

手動で挿入された改行については、テキスト領域のまたは文字、またはのようなHTML要素のいずれかによってHTMLで具体的に表さ\nれ\rます<br \>。したがって、テキストを測定する前に、段落ごとに分割することをお勧めします。

textareas：

var paragraphs = textarea.value.split('\n');

非フォーム要素の場合：

var paragraphs = [];

// getting all <p> and elements in a typical HTML element
// as well as individual text nodes (they are just DOM-nodes),
// separated by <br /> elements
var innerNodes = nonFormElement.childNodes;

for (var i = 0, len = innerNodes.length; i += 1) {
    // if a sub-element has some text in it,
    // add the text to our list
    var content = innerNodes[i].textContent;
    if (content) {
        paragraphs.push(content);
    }
}
于 2012-06-28T08:23:11.913 に答える
1

あなたが何を達成しようとしているのかわかりません。しかし、単語の位置を特定するために使用できる簡単なトリックを次に示します。このフィドルを参照してください 

var $text = $('#text'),
    breaks = [],
    top;

// wrap words (\w+) and punctuation (\S+) [well, non-word and non-space]
// in <spans> we can easily identify
$text.html($text.text().replace(/(\w+|\S+)/g, '<span>$1</span>'));

$text.children().each(function() {
    var $this = $(this),
        _top = $this.position().top;

    if (top === undefined) {
        top = _top;
    } else if (top < _top) {
        top = _top;
        // moved a row down
        breaks.push($this.prev());
        $this.prev().css('color', 'red');
    }
});


console.log(breaks);
于 2012-06-27T19:07:22.430 に答える