Question

如何打开下面的html，

<h3>Break me</h3>

到

<h3>
<span class="box-letter">B</span>
<span class="box-letter">r</span>
<span class="box-letter">e</span>
<span class="box-letter">a</span>
<span class="box-letter">k</span>
<span class="box-letter">&nbsp;</span>
<span class="box-letter">m</span>
<span class="box-letter">e</span>
</h3>

$("h3").text();这就是我所能想到的！（感到惭愧......）

的CSS，

.box-letter {
    display:block;
    clear:both;
    width:50px;
    border:1px solid #000;
    }

感谢。

Answer 1

// Splits the string into a "character array"    
var charArray = $('h3').text().split(''); 
// Clear the html of h3 so we can change it    
$('h3').html(''); 
for (var i = 0; i < charArray.length; i++)
{
  // for each character, append it to h3 with a span wrapper
  $('h3').append('<span class="box-letter">' + ((charArray[i] == ' ') ? '&nbsp;' : charArray[i]) + '</span>')
}

Answer 2

$('h3').each(function() {
  var data = $(this).text();
  var char;
  var output = '';

  for(i = 0; i < data.length; i++) {
    char = data.charAt(i);
    output += '<span class="box-letter">' + ((char == ' ') ? '&nbsp;' : char) + '</span>';
  }
  $(this).html(output);
});

Answer 3

您需要在猜测时获取H3的值，然后将其拆分为一个字符数组。之后，您可以将某些字符替换为其html实体：

// Get the text string
var str = $("h3").text();

// Get an array of each character
var chars = str.split("");

然后你可以遍历数组（字符）并转换你想要的任何内容：

以下是如何处理此问题的一个很好的示例： How to decode HTML entities using jQuery?

希望有所帮助！

Answer 4

尝试：

<h3>helloworld</h3>

使用javascript：

var target = $("h3");
var orig = target.text().trim();
target.empty();

for(var i=0; i < orig.length; i++){
    target.append("<span class='box-letter'>"+orig[i]+"</span>");
}

获得：

<h3 id="foo">
    <span class='box-letter'>H</span>
    <span class='box-letter'>e</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>w</span>
    <span class='box-letter'>o</span>
    <span class='box-letter'>r</span>
    <span class='box-letter'>l</span>
    <span class='box-letter'>d</span>
</h3>

可能需要手动检查 的“空白”字母，但是......

Answer 5

我不知道你是否想要跨度，或者你是否只是试图打破这个词，你可以这样做：

h3 { width: 5px; word-wrap: break-word; }

的 See jsFiddle 的

jquery：将文本分成多个框

5 个答案: