首先使用<span>进行自动换行，然后使用Jquery将另一个<span>与<br> <br>分隔开来

Question

我想在一个标签中添加第一个单词，在另一个标签中添加剩余文本
它们之间。 基本上我想要这种类型的html结构。

<div class="hotspot-name">
  <span>Building</span>
  <br/>
  <span>One text text</span>
</div>

无论我在下面的片段中提到了什么。

 $(".hotspot-name span").each(function () { var html = $(this).html().split(" "); html = html.slice(0, -1).join(" ") + " <br />" + html.pop(); $(this).html(html); }); 

 .hotspot-name{margin-top:10px;} 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <div class="hotspot-name"> <span>Building One</span> </div> <div class="hotspot-name"> <span>Building Two test test</span> </div> <div class="hotspot-name"> <span>Building Three test test</span> </div> <div class="hotspot-name"> <span>Building Four</span> </div> 

谢谢！！

Answer 1

在一个范围内的Array[0] ，然后剩余的值与另一个元素一起传递，请参阅参考数组切片到N.

我更新了颜色以区分两个跨度

 $(".hotspot-name span").each(function () { var html = $(this).html().split(" "); html = '<span class="first_span">'+html[0] + " </span><br /><span class='second_span'>" + html.slice(1).join(" ")+'</span>'; $(this).html(html); }); 

 .hotspot-name{margin-top:10px;} .first_span{ color:green; } .second_span{ color:red; } 

 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <div class="hotspot-name"> <span>Building One</span> </div> <div class="hotspot-name"> <span>Building Two test test</span> </div> <div class="hotspot-name"> <span>Building Three test test</span> </div> <div class="hotspot-name"> <span>Building Four</span> </div> 

Answer 2

要实现此目的，您可以将.hotspot-name元素中的span的文本拆分为数组，然后使用结果值构建两个跨度。 试试这个：

 $('.hotspot-name span').text(function(i, t) { var arr = t.split(' '); var html = '<span>' + arr.shift() + '</span></br><span>' + arr.join(' ') + '</span>'; $(this).closest('.hotspot-name').html(html); }); 

 .hotspot-name{ margin-top: 10px; } /* only to show the effect working... */ .hotspot-name span:first-child { color: #C00; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <div class="hotspot-name"> <span>Building One</span> </div> <div class="hotspot-name"> <span>Building Two test test</span> </div> <div class="hotspot-name"> <span>Building Three test test</span> </div> <div class="hotspot-name"> <span>Building Four</span> </div> 

Answer 3

据我所知，将是：

$(".hotspot-name span").each(function () {
  var html = $(this).html().split(" ");
  html = html.slice(1, html.length).join(" ") + " <br />" + html.pop();
  $(this).text($(this).html().split(" ")[0]+'</br>');
$(this).append(<span>'+html+'</span>');
});