Javascript Jquery或javascript在<div>中的x个字符后添加一个换行符<br />
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7068653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery or javascript to add one line break <br /> after x amount of characters in a <div>
提问by rod
I am looking for a way to insert a <br />after only the first 4 or 5 characters in a <div>.
我正在寻找一种方法，<br />仅在<div>.
Example:
<div id="wine-name">2008 Cabernet Sauvignon</div>
示例：
<div id="wine-name">2008 年赤霞珠</div>
To display like:
2008
Cabernet Sauvignon
展示如下：
2008
赤霞珠
Not sure which would be easier javascript or jQuery. The site is already using jQuery.
不确定 javascript 或 jQuery 哪个更容易。该站点已经在使用 jQuery。
Any ideas?
有任何想法吗？
回答by Peter Olson
If you are certain that you always want to insert the break after the fourth character, you can do this:
如果您确定总是要在第四个字符后插入中断，您可以这样做：
var html = $("#wine-name").html();
html = html.substring(0, 4) + "<br>" + html.substring(4);
$("#wine-name").html(html);
You can see it in action here.
你可以在这里看到它的实际效果。
If you want it to instead break after the first word (delimited by spaces), you can do this instead:
如果您希望它在第一个单词（由空格分隔）之后中断，您可以这样做：
var html = $("#wine-name").html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$("#wine-name").html(html);
You can see this in action here.
您可以在此处查看此操作。
EDITed for your comment:
编辑您的评论：
$(".wine-name").each(function() {
var html = $(this).html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$(this).html(html);
});
See it here.
在这里看到它。
回答by Snps
The code in JavaScript would look something like this:
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);
It's probably better to go with JQuery.
使用 JQuery 可能更好。
