Как изменить перенос текста по умолчанию с помощью HTML и CSS

В отличие от бумаги, веб-страницы могут почти бесконечно расширяться в стороны. Как это ни впечатляет, это не то, что нам действительно нужно во время чтения. Браузеры переносят текст в зависимости от ширины текстового контейнера и ширины экрана, так что мы можем видеть весь текст без большой прокрутки в сторону (только вниз).

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

Помимо упаковки браузеры также заботятся о местах; они объединяют несколько последовательных пробелов в исходном коде в один пробел на отображаемой странице, а также регистрируют принудительные разрывы строк перед началом работы с переносом.

Читайте также: 15 красивых текстовых эффектов, созданных с помощью CSS

Когда следует изменить перенос текста по умолчанию
Это все замечательно и высоко ценится. Но мы можем легко оказаться в обстоятельствах, когда поведение браузера по умолчанию не то, что мы ищем. Это может быть заголовок, который не следует переносить, или слово в абзаце, которое лучше разбить, чем спустить строку, оставляя странное пустое пространство в конце строки.

Может также случиться, что нам просто нужно, чтобы эти пробелы были сохранены в нашем тексте, однако браузер продолжает объединять их в одно, заставляя нас добавлять несколько & nbsp; в исходном коде.

Настройки упаковки могут также меняться в зависимости от языка и цели текста. Новостная статья «Мандарин» и французское стихотворение не обязательно должны быть завернуты одинаково.

Существует немало свойств CSS (и элементов HTML!), Которые могут управлять переносом и точками останова, а также определять способ обработки пробелов и разрывов строк перед переносом.
Возможности мягкой обертки и разрывов
Браузеры решают, где обернуть переполненный текст, в зависимости от границ слов, дефисов, слогов, знаков препинания, пробелов и многого другого. Эти места все называются возможность мягкой упаковки и когда браузер разбивает текст в одном из таких мест, разрыв называется мягкий перерыв,

Самый простой способ вызвать дополнительный разрыв можно сделать, используя старый добрый
элемент.
Пробелы
Если вы знакомы с бело-пространство CSS свойство Держу пари, вы пришли в первый знать его таким же образом, как и многие другие; при поиске способа предотвращения переноса текста. Nowrap значение пробела делает именно это.

Однако свойство пробела – это больше, чем просто перенос. Прежде всего, что такое пробел? Это набор космических символов. Каждое пространство в наборе отличается друг от друга по длине, направлению или обоим.

Типичный одиночный горизонтальный пробел – это то, что мы добавляем нажатием клавиши пробела. Клавиша Tab также добавляет аналогичный пробел, но с большей длиной. Клавиша ввода добавляет вертикальный пробел для начала новой строки и & nbsp; в HTML добавляет одно неразрывное пространство для веб-страниц. Таким образом, существует множество типов пространств, которые составляют «пробелы».

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

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

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

.textContainer {
  ширина: 500 пикселей;
  высота: 320 пикселей;
}

После применения пробела: nowrap; Как правило, перенос текста изменяется следующим образом:

.textContainer {
  / * … * /
  пустое пространство: nowrap;
}

Предварительное значение пробела сохраняет все пробелы и предотвращает перенос текста:

.textContainer {
  / * … * /
  пустое пространство: pre;
}

Значение предварительной пробелы для пробела сохраняет все пробелы и переносит текст:

.textContainer {
  / * … * /
  пустое пространство: предварительная упаковка;
}

Наконец, предстрочное значение пробела сохраняет вертикальные пробелы, такие как новые строки, и переносит текст:

.textContainer {
  / * … * /
  пустое пространство: предварительная линия;
}

Разрывы слов
Другое важное свойство CSS, которое вы должны знать для управления переносом текста: слово-брейк, На всех приведенных выше снимках экрана видно, что браузер обернул текст перед словом «привет» с правой стороны, за пределами которого текст был переполнен. Браузер не сломал слово.

Однако если вы должен Разрешить разбиение букв в слове так, чтобы текст выглядел даже с правой стороны, вам нужно использовать значение break-all для свойства word-break:

.textContainer {
  / * … * /
  разбить слово: разбить все;
}

Свойство word-break имеет третье значение, кроме break-all и normal (принадлежащее разрыву строки по умолчанию). Значение keep-all не позволяет разбивать слова.

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

Например, буквы в корейских словах, изначально разбитые для переноса, хранятся вместе, когда пробел: keep-all; правило указано.

.textContainer {
  / * … * /
  разрыв слова: держать все;
}

Это свойство может поддерживать другое значение, называемое break-word в будущем. Позже вы увидите, как работает слово «разрыв» в разделе «Перелив переполнения» этой статьи.
Возможность разбить слово
Разработчики также могут добавлять возможности переноса слов, используя Элемент HTML. Если браузер должен обернуть текстовую строку, он будет учитывать место, где присутствует для возможности упаковки.

.textContainer {
  / * … * /
  пустое пространство: предварительная упаковка;
}

Без все слово «Hello» было бы отображено в новой строке. Добавлением к HTML-коду мы сообщили браузеру, что в этот момент можно разбить слово для переноса, если это необходимо.
Дефис
дефиса Свойство CSS – это еще один способ контролировать разрывы между буквами в слове. У нас есть отдельная статья о переносе CSS, если вы заинтересованы. Короче говоря, свойство позволяет создавать возможности переноса через переносы.

Его автоматическое значение побуждает браузер автоматически переносить и разбивать слова, где это необходимо, при переносе. Ручное значение заставляет браузеры переносить (при необходимости) добавленные нами возможности переноса слов, такие как символ дефиса (& hyphen;) или & shy; (мягкий дефис). Если ни один не был задан в качестве значения, не было бы переноса рядом с дефисами.

.textContainer {
  / * … * /
  -webkit-дефисы: авто;
  -ms-дефисы: авто;
  дефисы: авто;
}

Переливная упаковка
Переполнение-обертка Свойство CSS контролирует, если браузер может разбивать слова (или сохраненные пробелы, поддержка которых может произойти в ближайшем будущем) при переполнении. Когда значение перерывного слова задано для переполнения, слово будет разбито, если в строке не найдены другие возможности мягкого переноса.

Обратите внимание, что overflow-wrap также известен как word-wrap (это псевдонимы).

.textContainer {
  / * … * /
  overflow-wrap: break-word;
}

Без пробела между буквами в приведенном выше HTML-коде (т. Е. Без возможности переноса текста) текст сначала не был перенесен и был сохранен как одно слово.

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

Читайте также: Работа с текстом в масштабируемой векторной графике (SVG)