Jquery o javascript para agregar un salto de línea <br /> después de x cantidad de caracteres en un <div>

Estoy buscando una forma de insert un <br /> después de solo los primeros 4 o 5 caracteres en un <div> .

Ejemplo: <div id="wine-name"> 2008 Cabernet Sauvignon </div>

Para mostrar como:

2008
Cabernet Sauvignon

No estoy seguro de cuál sería más fácil javascript o jQuery. El sitio ya está usando jQuery.

¿Algunas ideas?

Si está seguro de que siempre desea insert el salto después del cuarto carácter, puede hacer esto:

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

Puedes verlo en acción aquí .

Si, en cambio, quiere que se rompa después de la primera palabra (delimitada por espacios), puede hacer esto en su lugar:

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

Puedes ver esto en acción aquí .

EDITADO para tu comentario:

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

Véalo aquí .

El código en JavaScript se vería así:

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

Probablemente sea mejor ir con JQuery.