Сделайте половину слов go на следующей строке, если они не помещаются в одну

Question

У меня есть строка текста, которая занимает только одну строку на больших экранах, но разбивается на две строки, если на мобильном устройстве.

Мне интересно, можно ли распределить текст одинаково между двумя строками, только ЕСЛИ он разбивается на две строки. Это означает, что ему нужно сделать половину текста go во второй строке, а половину оставаться на первой строке, если он не может уместиться в одной строке, тогда как поведение по умолчанию - просто поместить слова, которые не могут поместиться на этой строке. на вторую строку.

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

Цель: сделать половину слов go на следующей строке, если она не может поместиться полностью на одном.

Answer 1

Начну с того, что в CSS нет встроенного решения для того, чего вы хотите достичь. Но есть Adobe jQuery плагин , который сделает это за вас.

Если вас не интересует плагин, я дам вам другой вариант «ручного разделения», чтобы примите во внимание:

Вы можете заменить пробелы, которые НЕ хотите прерывать, на  . Этот символ представляет собой «неразрывный пробел», что означает, что он выглядит точно как пробел, но никогда не разбивается между строками. Поэтому в тот момент, когда вы ХОТИТЕ, чтобы текст был разбит, если необходимо, вы оставляете обычный пробел. Итак, у вас будет что-то вроде:

This is a long text that will break in half in small screens

Answer 2

Один из вариантов - использовать </br> для переноса строки внутри текста. Это немного сложно, так как мы смешиваем текст и узлы DOM.

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br> Morbi ac posuere ante. </br> Mauris quis facilisis tortor.</br> Donec blandit eleifend tincidunt. Nullam dictum ipsum vel nibh fringilla tincidunt.</br>Sed pellentesque ultricies urna, ac finibus ipsum varius in.
</p>

Выполнение этого в javascript означает, что мы можем точно указать, где текст разрывается. Остерегайтесь, плохая практика и риск внедрения кода, если мы вставляем любую форму пользовательского ввода. Убедитесь, что у вас есть валидация

var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac posuere ante.'
var newString
var index = 20

// Insert at at specific length points, 20 in this case
for(var i = 0; i < text.length; i++){
  // Break if not matching index
  if(i % index !== 0)
    continue;
  newString += text.slice(i, i+index) + "</br>"
}

CHILD_NODE.innerhtml = newString
WHATEVER_TARGET_NODE.append(CHILD_NODE)

Answer 3

да, вы можете сделать это, используя CSS,

text-align-last: justify; / это ключ /

  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;

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