Як змінити стандартне перенесення тексту за допомогою HTML і CSS

На відміну від паперу, веб-сторінки можуть майже нескінченно простягаються боком. Наскільки це вражає, це не те, що нам дійсно потрібно під час читання. Браузери переносять текст залежно від ширина текстового контейнера і ширина екрана щоб ми могли бачити весь текст без необхідності багато прокручувати в бік (лише вниз).

Упаковка це те, що браузери роблять з урахуванням багатьох факторів, таких як мова тексту або розміщення знаків пунктуації і пробілів-вони не просто натискайте що не вписується у вікно, визначене для текстового вмісту.

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

Коли змінюється перенесення тексту за замовчуванням

Це все здорово і дуже цінується. Але ми можемо легко опинитися в обставинах, де поведінка веб-переглядача за умовчанням не є такою, яку ми шукаємо. Це може бути заголовок не слід загорнути або слово в абзаці краще розірватися, ніж спускатися по лінії, залишивши в кінці рядка порожній пробіл.

Також може статися, що ми просто відчайдушно потрібні ці простори, збережені в нашому тексті, однак браузер продовжує комбінувати їх в один, змушуючи нас додати кілька у вихідному коді.

Можливо також переваги упаковки змінюється з мовою та призначенням тексту. Мандаринська новинна стаття і французька поема не обов'язково повинні бути загорнуті точно так само.

Є чимало властивостей CSS (і елементів HTML!), Які можуть контролювати обгортку і точки зупину а також визначити, як обробляються пробіли та розриви рядків перед обтіканням.

Можливості м'якого обгортання та розриви м'якої обгортання

Браузери вирішують, куди переносити переповнений текст залежно від меж слова, дефісів, складів, пунктуацій, пробілів та інше. Всі ці місця називаються можливості м'якої обгортання і коли браузер розбиває текст на одному такому місці, перерва називається a м'яка обручка.

Найпростіший спосіб змусити додатковий перерву можна зробити за допомогою старого доброго
елемент.

Пробіли

Якщо ви знайомі з білий простір Властивість CSS Я впевнений, ви вперше дізналися про неї так само, як і багато інших; під час пошуку шляху запобігти упаковці тексту. The nowrap значення білий простір робить саме це.

Проте білий простір Власність - це більше, ніж просто упаковка. Перш за все, що таке пробіли? Це набір символів простору. Кожне простір в наборі відрізняється один від одного у довжину, напрямок або обидва.

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

Як я вже згадував на початку, браузери згорнути кілька пробілів (як горизонтальні, так і вертикальні) у джерелі в одному просторі. Вони також розглянемо ці символи простору для можливостей упаковки (місця, де текст може бути загорнутий), коли потрібно обгортання.

І саме ці дії браузера ми можемо контролювати білий простір. Зверніть увагу, що білий простір властивість не впливає на всі види простору, найчастіше такі, як звичайний горизонтальний простір, пробіли та рядки.

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

 
 â ?? Привіт. â ?? Привіт. â ?? Привіт â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Здрастуйте. 

 .textContainer width: 500px; висота: 320px;  

Після застосування білий простір: nowrap; правило, перенесення тексту змінюється таким чином:

 .textContainer / *… * / білий простір: nowrap;  

The попередньо значення білий простір зберігає всі простір і запобігає упаковці тексту:

 .textContainer / *… * / білий простір: pre;  

The попередня упаковка значення білий простір зберігає всі простір і обгортає текст:

 .textContainer / *… * / білий простір: попередній перенесення;  

Нарешті, pre-line значення білий простір зберігає вертикальні пробіли такі як нові лінії і обгортає текст:

 .textContainer / *… * / білий простір: попередня лінія;  

Слово перерви

Іншою важливою властивістю CSS, яку ви повинні знати для керування переносом тексту, є слово-брейк. Ви можете бачити на всіх наведених вище скріншотах, що браузер перегорнув текст перед словом “Здрастуйте” на правій стороні, за якою текст переповнений. Браузер не порушив слова.

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

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

The слово-брейк властивість має третє значення перерва і нормальний (що належить до розриву лінії за замовчуванням). The тримайте все значення не дозволяє розбивати слова.

Можливо, ви не зможете побачити ефект тримайте все англійською. Але, в мовах, де є літери одним словом самостійні одиниці, браузер може розірвати слова при перенесенні, і це можна запобігти тримайте все.

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

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

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

Це властивість може підтримувати назву іншого значення слово розриву в майбутньому. Ви побачите, як слово розриву працює пізніше, в “Переповнення” цієї статті.

Слово розриває можливості

Розробники також можуть додавати можливості обтікання в словах, за допомогою Елемент HTML. Якщо браузеру необхідно обернути текстовий рядок, він розгляне місце, де присутня для можливості упаковки.

 
 â ?? Привіт. â ?? Привіт. â ?? Hello â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Привіт. â ?? Здрастуйте. 
 

 .textContainer / *… * / білий простір: попередній перенесення;  

Без , цілий “Здрастуйте” слово було б винесено в новому рядку. Додавання до HTML-коду ми повідомили про це в браузері це гаразд, щоб розірвати слово в цій точці для упаковки, у разі необхідності.

Дефіси

The дефіси Властивістю CSS є інший спосіб контролю розривів між літерами в слові. Якщо ви зацікавлені, у нас є окрема стаття про розставлення CSS. Коротше кажучи, власність дозволяє створювати можливості упаковки за допомогою переносів.

Його авто значення підказує браузеру автоматично переношувати та розривати слова, де це необхідно під час упаковки. The керівництво значення змушує браузери обгортання (якщо необхідно) на додані нами можливості переносу, типу символу дефісу (‐) або ­ (м'який перенос). Якщо ні було дано як значення там було б немає обтікання біля дефісів.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

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

Переповнення

The переповнення Властивості CSS контролює, якщо a браузер може порушувати слова (або збережені простори, підтримка яких може відбутися найближчим часом) на переповнення. Коли слово розриву значення дається для переповнення, слово буде порушено у випадку не знайдено жодних інших можливостей для м'якої упаковки у рядку.

Зверніть увагу на це переповнення також відомий як перенос слів (вони є псевдонімами).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

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

Якщо не вказано пробіл між літерами в HTML-коді, наведеному вище (тобто, немає можливостей перенесення), текст спочатку не обертався збереглася як єдине слово.

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