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

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

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

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

Когда следует изменить перенос текста по умолчанию

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

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

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

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

Возможности мягкой обертки и разрывов

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

Самый простой способ вызвать дополнительный перерыв может быть сделано с помощью старого доброго
элемент.

Пробелы

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

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

Типичный одиночный горизонтальный пробел это то, что мы добавляем, нажав клавишу пробела. Клавиша Tab также добавляет похожее пространство, но с большей длиной. Клавиша ввода добавляет вертикальное пространство начать новую строку и в HTML добавляет одно неразрывное пространство на веб-страницах. Как это, есть много типов пространств, которые составляют “пробельные”.

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

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

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

 
 â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. 

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

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

 .textContainer / *… * / пробел: nowrap;  

до ценность бело-пространство сохраняет все пробелы а также предотвращает перенос текста:

 .textContainer / *… * / пробел: pre;  

предварительно обертка ценность бело-пространство сохраняет все пробелы а также переносит текст:

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

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

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

Разрывы слов

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

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

 .textContainer / *… * / word-break: break-all;  

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

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

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

ì  ??¸ÃªÂ³Â ?? à «Â¥Â¼ А-А-А¥А-А ??  ?? à «Â?  ?? Ã- ??  ??, ìÂ?  Â?  ?? ì½ ?? à «Â ??  ?? à «¡Â ?? А-А ??  ?? ì ??  Ã-¬Â ??  ?? ì  ??¤. ì   10    ?? ìÂ?  Â?  ?? ì½ ?? à «Â ??  ?? êµА-А¬?? А-А ??  ?? ì ??  ?? ê  ?? ° 1997 Ã…  ?? 3À¬Â ??  ?? 10А¬Â  ??¼Ã «Â¶Â ?? Â- ° 12ì  ??¼ÃªÂ¹Â à ??¬Â§Â ?? à «Â ?? Â… ì  ??¼Ã¬Â ??  ?? à «Â§Â à ??¬Â  ??¸Ã¬Â¦Â à ??¬Â- ?? ì ??  ?? ìА-А´Ã «Â¦Â½А «Â ??  ?? ë   ??¤. 짠à ??ªÂ¸Â ?? à «Â ??  ± ë ¡ ?? А-А ??  ?? ì ??  Ã-¬Â ??  ?? ì  ??¤. ì  ??´ А-А ??  ?? ì ??  ?? ìÂ- ?? ì ??  ?? à «Â ??  ?? ìÂ-Â… ê³ ?? ì ?? à «Â °  ?? ì ??  ?? ì  ??  «¬Â¸ÃªÂ ° à  ?? «Â  ??¤Ã¬Â  ??´ А-А ?? ¨ê »Â ?? à «ÂªÂ¨Ã¬А-А¬ à «Â  ??¤Ã¬Â ??  ?? ê³¼ ê  ° à ??¬Â ??  ?? à «Â¶Â à ??¬Â  ??¼Ã «Â¥Â¼ à «Â  ??¤Ã «Â £ ¹А «Â ??  ?? ë   ??¤.

 .textContainer / *… * / word-break: keep-all;  

Это свойство может поддерживать другое значение Распад слово в будущем. Вы увидите, как Распад слово работает позже, в “Переливная упаковка” раздел этой статьи.

Возможность разбить слово

Разработчики также могут добавить возможности переноса внутри слов, с использованием Элемент HTML. Если браузер должен обернуть текстовую строку, он будет учитывать место, где присутствует для возможности упаковки.

 
 â ??  ?? Привет. â ??  ?? Привет. â ??  ?? ЧАСЭлло М¢Â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. â ??  ?? Привет. 
 

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

Без , целый “Привет” слово было бы представлено в новой строке. Добавляя в код HTML, мы сообщили браузеру, что это нормально, чтобы сломать слово в этот момент для упаковки, в случае необходимости.

Дефис

дефиса CSS свойство еще один способ контролировать разрывы между буквами в слове. У нас есть отдельная статья о переносе CSS, если вам интересно. Короче говоря, свойство позволяет вам создать возможности для переноса через переносы.

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

 
 Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse Bluehouse 
 

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

Переливная упаковка

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

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

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

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

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

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