Закодированные разрывы названий делают странные вещи в Chrome

Question

У меня есть этот код:

jQuery(document).ready(function( $ ){
 jQuery(".woocommerce-loop-product__title").each(function() {
  var html = $(this).html().split(" ");
  html = html.slice(0,2).join(" ") + "<br>" + html.slice(2).join(" ");
 $(this).html(html);

});

  jQuery(".summary h1").each(function() {
  var html = $(this).html().split(" ");
html = html.slice(0,2).join(" ") + "<br>" + html.slice(2).join("     ");
$(this).html(html);
});


});

, и он отлично работает при добавлении разрывов.Тем не менее, в Chrome он создает некоторые странные проблемы с отображением: пару плавающих букв повторяющегося текста заголовка, и у меня это по центру в div - но Chrome не будет центрировать его.Другие в порядке, но только не Chrome.