Jquery或javascript添加一个换行符<br />在

Jquery or javascript to add one line break <br /> after x amount of characters in a <div>

本文关键字：br 换行符 一个 添加 javascript Jquery      更新时间：2023-09-26
中的x个字符之后。

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

的例子:<div id="wine-name"> 2008赤霞珠</div>



2008
赤霞珠

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

任何想法?

如果您确定总是要在第四个字符之后插入换行符，则可以这样做:

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);
});

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);

上面的两个答案都没有考虑到这样一个事实，即用例可能包括一些句子，其中应该在要求的限制之前在最近的空格处包含break。即上述方法将在指定索引处中断单词。但在大多数情况下，这并不是最合适的解决方案。以下是我的看法。

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可能会更好。(更微妙的)

相关文章：