在js中換行文本

在我繼續我的問題之前，我想在這裏提到我搜索了這個網站，看看問題是否已經發布。我看到一些類似的問題，但沒有一個解決我的需要。所以我在這裏問。在js中換行文本

我有一個div文字與我的文本包含在span標籤中的每個字符：

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）突出顯示的下一個字符輸入是綠色

所以定位的每個字符，我必須將它們封閉在跨度，並給每個跨度唯一的ID通過jQuery以選擇它們。希望這可以解釋原因。

感謝

來源

2011-12-13 D3 K

他們會不會感到寂寞全由自己？ – 2011-12-13 20:05:05

你在做什麼，要求每個字母在一個跨度？可能有更好的解決方法。 – 2011-12-13 20:06:59

他們走出格的，如果他們不需要在那裏？

把任何你想包裹在div裏面？

來源

2011-12-13 20:05:33

<span> </span>確實需要嗎？

如果你可以避免在一個範圍內包裝這1個字符，它應該包裹得很好。我無法想象爲什麼你需要設計一個非破壞性的空間，或者用javascript來訪問它。如果你這樣做，爲什麼？

其他字符在跨度內是好的，但我認爲你可以將 移出，而不是將它包裹在一個跨度中。

來源

2011-12-13 20:10:38 danludwig

試試這個：

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

來源

2011-12-13 20:11:39 austincheney

審查意見後，我終於做到了沒有「跨越」標籤包圍的每個字符。我做了兩個跨度。一個用於鍵入字符和其他當前字符。在每個關鍵事件中，我通過用更新的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(); 
});

謝謝大家......

來源

2011-12-14 07:32:01

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

來源

2013-02-06 14:17:39

在js中換行文本

回答

相關問題