Определяют как переносить длинные слова:

1. только там, где стоит чёрточка, пробел или Enter (искл., неразрывный пробел и неразрывный дефис ‑). Между частями одного слова пишется дефис (например, красно‐жёлтый), между словами — тире. "Мягкий дефис" - проявляется только при необходимости переноса. Если слово выходит за рамки родителя, то или ​ переносит его часть без чёрточки. В математических выражениях используется минус (например, 5 − 2). В номерах телефонов отображается цифровая чёрта (например, +7 800 000‒00‒00). И всё это не является той знакомой -, что есть на клавиатуре.
2. после любого символа.
3. согласно правилам русского языка с автоматическим применением дефиса.

overflow-wrap
word-wrap
word-break
line-break
hyphens

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

В чём состоит различие одно свойства от другого

По умолчанию длинные слова не переносятся, если на то нет явных указаний с помощью дефиса, и начинаются с новой строки.

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

Для того, чтобы браузер не обращал внимания и на мягкий дефис, вставляем hyphens: none; .

Если требуется перенос слов, то word-wrap: break-word; советую применять всегда, поскольку он понимается всеми браузерами. Он отличается от word-break: break-all; , которое является приоритетным, тем, что слова, которые не помещаются в блок, начинаются с новой строки и учитывается рекомендация мягкого дефиса.

При совместном использовании word-break: break-all; с hyphens: auto; , последнее игнорируется. hyphens: auto; расставляет любые дефисы по своему усмотрению. Но для того, чтобы оно работало, нужно обозначить свой язык, указав в div атрибут lang="ru" .

Не переносить слова на другую строку

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим "по умолчанию" и добавить . Нажмите на и посмотрите на наш полигон.

Управлять переносом слов при hyphens: auto;

Тетрагидропиранилциклопентилтетрагидропиридопиридино вые

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

Свойство word-wrap

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

Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки внешнего вида элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.

Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.

Чтобы логотипу из предыдущего примера назначить с помощью CSS перенос на новую строку каждой буквы, нужно прописать следующий код:

P{ font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; }

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

Свойство white-space

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

В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши "Ввод". White-space со значением pre-line заставит браузер видеть в тексте Enter.

Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:

#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; }

Text-overflow

Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:

• clip — просто обрезает текст;
• ellipsis — добавляет многоточие.

#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Добавляем многоточие*/ white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden;/*Прячем все что выходит за рамки контейнера*/ }

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

Урок 5.

В этом уроке мы:
1. Узнаем как сделать чтобы html код был для нас более удобен и легко читаем.
2. Разберем как правильно делать перенос текстовой строки.

Делаем html код удобным.

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

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

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

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

Перенос строки html. Тег <br>.

Обратите внимание на рисунок. В первом варианте текст написан в одну строку, во втором варианте в две строки.

Браузер будет отображать оба варианта одинаково. Текст будет написан в одну строку:

Вы спросите, почему так? Ведь в одном из кодов часть текста перенесена на другую строку. Было бы логично если бы в браузере часть текста тоже перенеслась на другую строку, но у html своя логика в этом отношении. Если мы в html коде делаем перенос строки, то для браузера это равнозначно одному пробелу (как обычный пробел между словами в тексте). Если мы перенесем часть текста не на одну строку вниз, а на 2 или 3 (любое количество), то браузер все равно будет считать это расстояние за один обычный пробел между словами и при выводе на экран текст будет писаться в одну строку.

Тег <br>

Когда мы в третьем уроке знакомились с тегами, я упомянул, что бывают теги которые не требуют закрытия. Тег <br> один из них, служит он для переноса строки.
Давайте применим его в коде:

Мы вставили тег <br> в наш html код и теперь при запуске файла через браузер часть текста будет перенесена на следующую стоку.
* Не забываем сохранять изменения в Notepad (Ctrl + S) и обнавлять страницу в браузере (F5).

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

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

Способ 1: использование клавиатуры

Самый простой вариант переноса на другую строку, это установить курсор перед тем отрезком, который нужно перенести, а затем набрать на клавиатуре сочетание клавиш Alt+Enter .

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

Способ 2: форматирование

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

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

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

Способ 3: использование формулы

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

Главным недостатком данного способа является тот факт, что он сложнее в выполнении, чем предыдущие варианты.

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

Влад Мержевич

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

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

Тег введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега создаёт перенос.

Пример 1. Тег

Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

Результат данного примера показан на рис. 1.

Рис. 1. Текст с переносами слов

Мягкий перенос

Применение имеет серьёзный недостаток - понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол - . Он выполняет ту же роль, что и тег - не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).

Пример 2. Мягкий перенос

Один-надцатиклас-сница Анжелика после окончания школы выбрала профессию дело-произ-водитель-ницы.

Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

Рис. 2. Текст с переносами слов

Свойство word-break

Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

Пример 3. Применение word-break

Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

Рис. 3. Текст с переносами слов

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

Свойство hyphens

И, наконец, самое мощное и удобное свойство для автоматического добавления переносов - hyphens . Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега добавляем атрибут lang со значением ru (пример 4).

Пример 4. Использование hyphens

Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

Результат данного примера показан на рис. 4.

Рис. 4. Текст с переносами слов

Запрет переносов

Нередко возникает и обратная задача - запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).

Пример 5. Использование

Озеро по координатам 70° 58′ 19″ с. ш. 97° 24′ 5″ в. д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.

В данном примере для корректного написания координат используется , который не позволяет переносить текст.