jsのテキストを折り返し

Question

質問を進める前に、このサイトを検索して質問が既に投稿されているかどうかを確認してください。私は似たような質問をしますが、私の必要性に対処したものはありません。だから私はここで尋ねている。

私は、spanタグで囲まれた私のテキストの各文字を持つdiv要素内のテキストを持っている：

Text = A quick brown fox jumps 

<div id="span_text"> 
<span>A</span><span>&nbsp;</span><span>q</span><span>u</span><span>i</span><span>c</span><span>k</span><span>&nbsp;</span><span>b</span><span>r</span><span>o</span><span>n</span><span>&nbsp;</span><span>f</span><span>o</span><span>x</span><span>&nbsp;</span><span>j</span><span>u</span><span>m</span><span>p</span><span>s</span> 
</div> 

問題は、各文字がspanタグで囲まれているので言葉は周りをラップしていないということです。スパンに囲まれた文字を持っている間、MS Wordや他のエディタのようにテキストを折り返す方法はありますか？

なぜ各文字をスパンで囲む必要がありますか？ 実際に私は基本的なタイピング教師を作っています。キーが押されるたびに、私は：（1）ハイライト有効な文字が入力された場合はグレーでなければなりません。 （2）ハイライト文字が間違った文字が入力された場合は赤で表示されます。 （3）入力する次の文字をハイライトします。緑色

各文字をターゲットにするには、それらをスパンで囲み、各スパンにjQueryで選択するための一意のIDを付ける必要があります。理由を説明してほしい。

おかげ

Answer 1

彼らはそこにする必要がない場合はDIVからそれらを取得しますか？

div内に折り返したいものを入れてください。

Answer 2

<span>&nbsp;</span>は本当に必要ですか？

スパンで1文字をラップするのを避けることができれば、うまくラップする必要があります。私はあなたが非破壊空間をスタイルする必要があるか、またはJavaScriptでアクセスする必要があるのか​​想像できません。もしそうなら、なぜですか？

他の文字はスパンの内側では問題ありませんが、 を移動してスパンに包まないでください。

Answer 3

これを試してみてください：

(function() { 
    var a = document.getElementById("span_text"); 
    a.innerHTML = a.innerHTML.replace(/<\/span><span>/g, "\n").replace(/<\/?span>/g, ""); 
    a.style.whiteSpace = "pre"; 
    a.style.width = "1.5em"; 
    a.style.overflow = "scroll"; 
}()); 

Answer 4

は、コメントを確認した後、私は最終的に「スパン」タグ内の各文字を囲むことなく、それを作りました。私は2つのスパンを作った。 1つは入力された文字、もう1つは現在の文字です。各keyupイベントで、現在のHTMLを更新されたHTMLに置き換えてdivコンテンツを更新します。以下は、私が使用している基本的なロジックです：

var Text = "The quick brown fox jumps over the lazy dog. It was dark and quiet in the room."; 
var ChTyped = 0; // Number of characters typed so far 

function update(){ 
    var StringTyped = Text.substr(0, ChTyped); 
    var StringCurrent = '<span class="l-active">' + Text.substr(ChTyped, 1) + '</span>'; 
    var StringRemaining = Text.substr(ChTyped+1); 
} 

$("#typingbox").on('keyup', function(e){ 
    ChTyped++; 
    update(); 
}); 

Answer 5

function GetWrapedText(text, maxlength) {  
    var resultText = [""]; 
    var len = text.length;  
    if (maxlength >= len) { 
     return text; 
    } 
    else { 
     var totalStrCount = parseInt(len/maxlength); 
     if (len % maxlength != 0) { 
      totalStrCount++ 
     } 

     for (var i = 0; i < totalStrCount; i++) { 
      if (i == totalStrCount - 1) { 
       resultText.push(text); 
      } 
      else { 
       var strPiece = text.substring(0, maxlength - 1); 
       resultText.push(strPiece); 
       resultText.push("<br>"); 
       text = text.substring(maxlength - 1, text.length); 
      } 
     } 
    } 
    return resultText.join(""); 
}