JQuery или javascript, чтобы добавить один разрыв строки <br/"> после x количества символов в <div>

Я ищу способ вставить <br /> только после первых 4 или 5 символов в <div>.

Пример: <div id="wine-name"> 2008 Каберне Совиньон </div>

Отобразить как:

2008
Каберне Совиньон

Не уверен, что будет проще javascript или jQuery. Сайт уже использует jQuery.

Любые идеи?

Ответ 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);
});

Смотрите здесь.

Ответ 2

Код в 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.