Разделение текста на несколько строк (т. Е. Для заголовков)

Question

Я сражаюсь за способ, чтобы текстовое обертывание прекрасно вписывалось в набор боксов. Браузеры обертывают текст, если он слишком длинный, чтобы вписаться в одну строку, которая ожидается, но это часто может привести к довольно неприятному представлению.

Например, это выглядит нормально:

This is the title 

Но если у меня есть длинное название, это может закончиться завернутые так:

This is a slightly longer 
title 

Как вы можете видеть, что второй один Безразлично» т действительно выглядят очень хорошо, то, что я стремлюсь к что-то вроде этого:

This is a nicer 
wrapped title 

Я знаю, насколько большой содержащий DIV Wi будет, так что это не проблематичная переменная, но я пытаюсь обойти все возможные способы достижения красиво отформатированных названий и их недостатков. Итак, вопрос в том, какой был бы лучший способ сделать это? Я могу придумать несколько способов, но они начинают экспоненциально усложняться, если они обертывают более двух строк.

EDIT: В настоящее время я использую это - https://xnode.org/paste/19 - чтобы попытаться выровнять сплит-линии, хотя я уверен, что это далеко не идеально.

Answer 1

Вы можете удалить символ новой строки, а затем использовать wordwrap функция

Answer 2

Похоже, работа для функции WordWrap http://php.net/manual/en/function.wordwrap.php

Answer 3

Попробуйте использовать wordwrap функцию и дать этот CSS для DIV:

div { 
    text-align: justify; 
} 

Answer 4

Если http://fittextjs.com/ не делает трюк, попробуйте что-нибудь в этом направлении ...

Подсчитайте персонажей своего названия и решите, понадобится ли ему 1 линия, 2 линии 3 линии и т. Д. (Будет задействована некоторая пробная ошибка &)

Замените все пространства, кроме того, где вы хотите разрывов строк с   (неразрывные пробелы), и пусть браузер выполняет перенос слов.

Другими словами, в вашем примере This is a nicer wrapped title имеется 29 букв, поэтому вам нужно перерыв на полпути или сразу после этого, поэтому замените первое неразрывное пространство после позиции 14 или 15 с обычным пространством, т.е. между ' более приятным »и« завернутым », и это должно выполнить эту работу. То же самое в трети или четверти для более длинных линий.

Извините, нет кода, но из приведенных выше примеров вам должно быть хорошо, придумать собственную реализацию.

Answer 5

Я создал этот плагин JQuery, который делает то, что вы хотите

$.fn.prettyBreak = function() { 

    return this.each(function() { 

     var element = $(this); 

     var elementLineHeight = element.css("line-height").replace("px", ""); 

     var elementContent = element.contents(); 

     element.wrapInner("<span style='white-space: nowrap'>"); 

     element.find("br").remove(); 

     var textWidth = element.find("span").width(); 

     element.html(elementContent); 

     var elementText = $.trim(element.text()); 

     if (element.is(":visible") && textWidth > element.width() && element.height() < elementLineHeight * 2.1) { 

      var middle = Math.floor(elementText.length/2); 
      var before = elementText.lastIndexOf(" ", middle); 
      var after = elementText.indexOf(" ", middle + 1); 

      if (middle - before < after - middle) { 
       middle = before; 
      } else { 
       middle = after; 
      } 

      var s1 = elementText.substr(0, middle); 
      var s2 = elementText.substr(middle + 1); 

      element.html(s1 + "<br> " + s2); // note the space after the tag 

     } else { 
      element.html(elementText); 
     } 

     if (element.is(":visible")) { 
      element.css("opacity", 1); 
     } 

    }); 
} 

Использование:

$(document).on("ready", function() { 
    $(".pretty-break:visible").prettyBreak(); 

    setInterval(function() { 
     $(".pretty-break:visible").prettyBreak(); 
    }, 1000); 
}); 

GitHub ссылка: https://github.com/SumoSoft/PrettyBreak