Jquery 或 javascript 添加一个换行符<br>在 a 中的 x 个字符之后<div></div><div id="text_translate"><p>我正在寻找一种在&lt;div&gt;中仅前 4 或 5 个字符之后插入&lt;br /&gt;的方法。</p><p> 示例： &lt;div id="wine-name"&gt; 2008 年赤霞珠&lt;/div&gt;</p><p> 显示如下：<br><br> <strong>2008年</strong><strong><br></strong><strong>赤霞珠</strong></p><p>不确定 javascript 或 jQuery 哪个更容易。 该网站已经在使用 jQuery。</p><p> 有任何想法吗？</p></div>

Question

我正在寻找一种在<div>中仅前 4 或 5 个字符之后插入<br />的方法。

示例： <div id="wine-name"> 2008 年赤霞珠</div>

显示如下：

2008年
赤霞珠

不确定 javascript 或 jQuery 哪个更容易。 该网站已经在使用 jQuery。

有任何想法吗？

Answer 1

如果你确定你总是想在第四个字符之后插入中断，你可以这样做：

var html = $("#wine-name").html();
html = html.substring(0, 4) + "<br>" + html.substring(4);
$("#wine-name").html(html);

您可以在这里看到它的实际效果。

如果您希望它在第一个单词之后中断（由空格分隔），您可以这样做：

var html = $("#wine-name").html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$("#wine-name").html(html);

您可以在这里看到这一点。

编辑您的评论：

$(".wine-name").each(function() {
    var html = $(this).html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $(this).html(html);
});

在这里看到它。

Answer 2

上述两个答案都没有考虑到用例可能包括在所需限制之前的最近空格处应该包含中断的句子。 即上述方法将打破指定索引处的单词。 但在大多数情况下，这不是最合适的解决方案。 这是我对此的看法。

 function myFunction() { var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book"; //var str = "LoremIpsumissimplydummytextoftheprintingandtypeset tingindustry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimensdfdfdfdfsdsds book"; var originalStr = str; str = splitString(str); document.getElementById("demo").innerHTML = str; } function splitString(str) { var originalStr = str; var charLimit = 50; var slicedStringList = []; var flag = 1; while(flag) { if(str.length <=50) { slicedStringList.push(str); flag=0; } else { var tempChar = str[charLimit] if(tempChar == ' ' ||tempChar == '\n' ||tempChar == '\r') { slicedStringList.push(str.substring(0,charLimit)); str = str.substring(charLimit+1,originalStr.length); } else { var tempStr = str.substring(0,charLimit); var nearestSpace = tempStr.lastIndexOf(" "); if(nearestSpace>-1) { slicedStringList.push(str.substring(0,nearestSpace)); str = str.substring(nearestSpace+1,originalStr.length); } else { slicedStringList.push(tempStr); str = str.substring(charLimit+1,originalStr.length); } } } } var newString = slicedStringList.join("<br>"); return newString; }

 <!DOCTYPE html> <html> <body> <button onclick="myFunction()">Try it</button> <p id="demo"></p> </body> </html>

但它可能比 go 和 css 更好。（更微妙）

Answer 3

JavaScript 中的代码如下所示：

var element = document.getElementById('wine-name');
element.innerHTML = element.innerHTML.substring(0, element.innerHTML.indexOf(' ')) + '<br />' + element.innerHTML.substring(element.innerHTML.indexOf(' '), element.innerHtml.length);

go 和 JQuery 可能会更好。