Jquery或javascript用于在/>中的字符数x之后添加一行分隔符<br <div>
Jquery或javascript用于在/>中的字符数x之后添加一行分隔符<br <div>
提问于 2011-08-15 18:00:05
我正在寻找一种方法，以插入一个<br />后，只前4或5个字符在一个<div>。
例子：<div id="wine-name">2008赤霞珠</div>
展示如：
2008
Cabernet Sauvignon
不确定哪个更简单，javascript还是jQuery。该网站已经在使用jQuery。
有什么想法吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-08-15 18:05:51
如果您确信始终希望在第四个字符之后插入中断，则可以这样做：
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);您可以在实际的这里中看到这一点。
关于您的评论，EDITed：
$(".wine-name").each(function() {
var html = $(this).html().split(" ");
html = html[0] + "<br>" + html.slice(1).join(" ");
$(this).html(html);
});看吧，这里。
Stack Overflow用户
发布于 2011-08-15 18:06:18
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);使用JQuery可能更好。
Stack Overflow用户
发布于 2020-10-29 07:38:37
上述两种答案都没有考虑到用例可能包括在所需限制之前，中断应包括在最近的空间的句子这一事实。也就是说，上述方法将打破指定索引处的单词。但在大多数情况下，这并不是最合适的解决办法。这是我对这个的看法。
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>
但更好的方法是使用css。(更微妙)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7068653
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号