Как отменить перенос слов css

Перенос слов в тексте html, css

@humster_spb Да, указано. Но это не суть. Оно все равно режет слова, а мне нужно, чтобы перенос был от последнего пробела.

7 фев 2018 в 19:49

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

7 фев 2018 в 19:53

Chrome, кстати, вообще не поддерживает значение auto для hyphens — переносы не работают, слова перемещаются на новую строку целиком

7 фев 2018 в 19:55
@Streletz Еще подключен bootstrap. Вполне возможно, что там прописано что-то для
7 фев 2018 в 20:06

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

По умолчанию именно так и работает — перенос по словам.
Если по какой-то причине происходит разрыв слова, то дело в word-break .
Помимо этого, исправить можно одним из следующих способов:

pre < white-space: pre-wrap; overflow: auto; border: 1px dotted red; width: 32ch; float: left; margin: .5em; min-height: 7em; >.break < word-break: break-all; >.cancel < word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; >.to-normal < word-break: normal; word-wrap: normal; overflow-wrap: normal; >pre:before

пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890
пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890
пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890
пылесосный пылесосательный пылесос 1234567890123456789012345678901234567890

Как отменить перенос текста css
Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

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

Решаем проблему переноса слов с помощью HTML
Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста. 
Для этого в HTML имеется несколько вариантов:

Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:



Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:


Перенос слов средствами CSS
Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:


Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

normal – слова не переносятся;
break-word – автоматический перенос слов;
inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

normal – используются правила переноса, установленные по умолчанию;
word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.



hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:


none – отключает перенос слов в CSS ;
manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
auto – браузер автоматически переносит слова на основе своих настроек.

должен присутствовать атрибут lang со значением «ru» (lang=”ru”).
Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

Запрет переноса слов
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
Задав свойству white-space значение « nowrap » ( white-space: nowrap ).


Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
У меня в CSS есть стиль, которым я покрываю нужное мне словосочетание (2 слова обычно). Хочу, чтобы эти два слова не разделялись переносом строки.
Допустим после слова “два” у меня должен идти перенос строки (потому что она заканчивается), но я хочу чтобы в таком случае перенос состоялся ДО слова “два”, то есть перенеслось сразу словосочетание “два слова”.
Глобально по документу прописан word-wrap: break-word;

Приветствую вас, дорогие друзья!
Сегодня я предлагаю вам разобраться, как можно запретить перенос слов CSS-свойствами.
Дело в том, что по умолчанию в HTML для текста в блоках переносы для слов не заданы, и при уменьшении размеров блока, слова переносятся на новую строку. Но в случае создания сайта на базе CMS, например, WordPress, вы можете столкнуться с тем, что, при адаптации сайта для мобильных устройств, слова будут переноситься посимвольно.
Делается это, в первую очередь для экономии места, и наилучшего заполнения текстом блока. Но далеко не всегда это удобно и красиво.
Давайте рассмотрим свойство, которое позволит вам запретить перенос слов CSS при возникновении такой необходимости.
В случае если у вас при изменении размера блока происходит перестроения текста с переносом отдельных символов на следующую строку, то, скорее всего, в активной теме вашего сайта для всех div применяется CSS-свойство word-break со значением break-all:
Данное свойство задает автоматическую расстановку переносов для наилучшего заполнения блока.
Если вам нужно его отключить, то в CSS-файле активной темы, для блока, в котором расположен текст, вам нужно задать это же свойство, но со значением normal:
Как реализуется перенос текста css?
Автоматические переносы запускаются в два шага. Первый — установить язык для текста. Это сообщит браузеру, какой использовать словарь. Для корректных переносов нужен словарь переносов, соответствующий языку текста. Если браузер не знает языка текста, то рекомендации CSS говорят не активировать переносы, даже если они включены в таблице стилей.
1. Установка языка
Язык веб-страницы устанавливается с помощью атрибута HTML lang :
Это лучший способ установки языка для всех веб-страниц, включены там переносы или нет. Установка языка поможет инструментам для автоматического перевода, скринридерам и другим вспомогательным программам.
Атрибут lang=»en» применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:
2. Включение переносов
После установки языка можно включить автоматические переносы в CSS. Это исключительно просто:
В настоящее время Safari и IE/Edge требуют префиксов, поэтому прямо сейчас следует написать так:
Как сделать перенос строки в тексте в HTML?
Сегодня мы с вами немного коснемся темы оформления текстов на вашем сайте. Создавая сайт и ведя уже существующий, нужно грамотно подходить к каждой его мелочи. Я – активный пользователь Интернета, очень часто ищу различную информацию абсолютно по разным темам. Зачастую встречаю сайты, на которых информация представлена примерно в таком виде:
Не говоря уже о том, что здесь нет никаких выделений (главного в тексте), так и отсутствуют какие-либо параграфы, или попросту – переносы строк. Текст может быть и корректным с точки зрения орфографии и его темы, но визуально – он некомфортен для восприятия. Согласитесь, такой вид куда более читабельный и не «отпугивает» наших пользователей:
Неважно, коммерческий ваш сайт или это обычный блог – всем этим нюансам должно быть уделено отдельное внимание. Именно поэтому сегодня я покажу вам целых три варианта переноса строк в вашем тексте
Для наглядности за основу мы возьмем популярный в кругах дизайнеров и верстальщиков текст «Lorem Ipsum», а если быть точнее – то несколько его параграфов:
и рассмотрим популярные способы переноса строк в HTML.
Всё, что нужно знать об автоматических переносах в CSS
Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.
Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.
В вебе автоматические переносы появились в 2011 году и теперь широко поддерживаются. Safari, Firefox и Internet Explorer 9 поддерживают их на всех платформах, а Chrome — на Android и MacOS (пока нет на Windows или Linux).
Слишком длинные ссылки
Я постоянно сталкивалась с проблемой слишком длинных ссылок, снова, при подготовке электронной книги (да, при публикации электронной книги это буквально худшее) с множеством целых ссылок в сносках.
По умолчанию такие ссылки не разрываются и вызывают всяческие неприятности на небольших экранах. При необходимости URL’ы должны разрываться без дефиса, поскольку ссылка в таком случае будет нерабочей. Также здесь нужно быть осторожным, поскольку, если вы такое допустите, то разорвутся не только URL’ы, но и все слова.
на ссылке гарантирует, что URL разорвётся в границах контейнера и переполнения не будет, хотя добиться кроссбраузерности тут не так просто, как можно было бы подумать.
Зачем придумали тег br?
Необходимость этого тега существует хотя бы потому что перенести строку «как в Ворде» (как делают неопытные пользователи), путем написания десятков пробелов подряд, — не выйдет.
Почему не выйдет? Потому что любое количество пробелов будет считаться браузером как один пробел, а не перенос строки — браузер автоматически удаляет лишние пробелы. Для этого и нужен перенос строк.
Но не стоит злоупотреблять тегом 
, чтобы все больше и больше увеличивать расстояние между строками — для этого лучше всего воспользоваться базовыми инструментами HTML+CSS. Недопустимо создание новых абзацев или «как бы абзацев» (это считается плохим подходом) — только перенос строки!
Чтобы создавать и размечать абзацы вам следует пользоваться тегом p, а чтобы увеличить имеющееся расстояние между абзацами — измените каскадные таблицы стилей, например добавьте:
margin-top 40 px;
Переносы
Первое решение для длинных слов — это применение переносов.
Поддержка браузерами: CSS-переносы поддерживаются во всех популярных браузерах, за исключением браузеров, реализованных на основе движка Blink (Chrome, Opera, Android). Здесь описаны все распространенные ошибки в Chrome. Я также протестировал Safari 5.1 под Windows, в котором переносы поддерживаются, но для моих тестовых слов все они добавлялись не в тех местах, в которых нужно.
Кроме этого, переносы во многом зависят от правил языка. Вам нужно определить атрибут lang в родительском элементе. Также нужно помнить, что другие языки, кроме английского, поддерживаются в браузерах на весьма низком уровне.
Вы также можете использовать библиотеку JavaScript, такую как Hyphenator.js, которая работает со многими языками и многими браузерами. Недостатком этого решения является то, что вам нужно будет загружать много дополнительных скриптов JavaScript, что может существенно снизить производительность.
word-break
Так как не все браузеры полностью поддерживают перенос слов, давайте попробуем это свойство CSS, которое указывает, следует ли разрывать строки внутри слов:
Поддержка браузерами: Свойство CSS word-break поддерживается во всех браузерах, за исключением Opera Mini и старых браузеров Opera на основе Presto.
Overflow-wrap
Еще одно возможное решение данной проблемы — использование word-wrap (overflow-wrap). Еще одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:
Поддержка браузерами: Свойство CSS word-wrap поддерживается во всех браузерах. В некоторых из них для нормальной работы требуется указывать унаследованное имя word-wrap (а не overflow-wrap).
Эллипсис
Еще один вариант для решения проблемы длинных слов — это усечение:
Поддержка браузерами: Text-overflow поддерживается во всех основных браузерах.
На первый взгляд кажется, что этот метод неплохо справляется с нашей проблемой, но он имеет ряд недостатков. Прежде всего, он будет обрезать любой текст, занимающий более одной строки, даже если вы использовали короткие слова, и они прекрасно разместились бы в нескольких строках. Кроме этого слова могут обрезаться так, что исходное слово будет приобретать другое значение.
Пожалуйста, не используйте text-overflow: ellipsis, потому что сокращать слова — это не работа CSS. Только, если вам действительно необходимо это сделать на стороне сервера, и только после полного сокращения слов.
Заключение
Я проверил все приведенные выше примеры и их сочетания в следующих браузерах: IE7, IE8, IE9, IE10, IE11, Edge, Firefox 39 (Windows, Linux, Mac), Chrome 44 (Windows, Linux, Mac), Opera 30 (Windows, Mac) , Safari 8 (Mac), Safari 5.1 (Windows), Android-5 (Nexus 6), Android 4.4 (Nexus 5), Android 2.3 (Galaxy S2), IOS 8.3 (iPhone 6), IOS 7 (iPhone 5S), IOS 6 (iPhone5), Opera Mini (Android 5), Opera Classic (Android 5), Opera Mobile (Android 5) и Windows Phone 8.1 (Lumia 930), используя реальные устройства и BrowserStack. По этой ссылке вы найдете список всех 26-браузеров, по этой ссылке — результаты их тестирования.
В интернете можно найти и такое решение:
Хотя это прекрасно работает в большинстве случаев, я выяснил, что в Firefox перенос не будет работать (хотя он и поддерживается) в сочетании с word-break. Как и word-break, это свойство не поддерживается, и не будет работать в Opera Mini.
В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.
Окончательное решение
Данная публикация является переводом статьи «Dealing with long words in CSS» , подготовленная редакцией проекта.
Строки кода в блоке
Строки кода в теге по умолчанию не переносятся. Это может вызвать неприятности в статьях блога и технических электронных книгах на мобильном, например.
По моему опыту, обычно решение зависит от того, на каком языке этот код, и вообще от задачи, но эти проблемы можно обойти при помощи принудительных переносов (без дефиса!) или горизонтального скроллинга. Методом проб и ошибок можно понять, какое точное сочетание свойств нужно тому или иному браузеру. Убедитесь, что значение случайно не переопределилось на одно из тех, при которых пробелы схлопываются, потому что это может оказаться значимым для синтаксиса кода.
Также я нарвалась на проблемы с адаптивностью при оформлении кода для github (gist), который особенно коварен из-за того, что это table. В таких случаях я понимаю, что мне придётся применить особенное оформление для переопределения контейнера таблицы.
Как реализовать запрет переноса слов CSS
Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет использовать CSS перенос слов можно реализовать несколькими способами:

С помощью неразрывного пробела &nbsp, который устанавливается в местах переноса строки или слов;
Задав свойству white-space значение «nowrap» (white-space: nowrap).

Урок 5Перенос строки HTML
Практикум
В ходе создания HTML-документа может возникнуть необходимость переноса строки внутри абзаца: например, при размещении отрывка из стихотворения каждая фраза должна начинаться с новой строки.
Обратите внимание, что вы не сможете изменить вид отображения текста на странице с помощью добавления в код дополнительных пробелов или переносов строки. Любое количество пробелов и переносов строк будет считаться как один пробел, так как браузер будет автоматически удалять все лишние пробелы и переносы строк.. В таких случаях самым лучшим выходом из ситуации будет использование тега (вставляет перенос строки)
Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег . Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать , а разве это было бы удобнее?!
В таких случаях самым лучшим выходом из ситуации будет использование тега 
(вставляет перенос строки). Он является одним из пустых элементов, у которых нет содержимого. Пустые теги, такие как br, изначально не имеют никакого содержимого, поэтому для их использования было придумано краткое описание для представления элемента, то есть в то место, где нужно добавить разрыв строки, просто подставляется тег 
. Краткое описание подразумевает то, что этот тег не имеет закрывающего тега. Если не было бы краткого описания, пришлось бы каждый раз для обозначения разрыва строки писать , а разве это было бы удобнее?!
Примите во внимание, что краткое описание придумано и используется не из-за лени, а для повышения эффективности, за счет более легкого чтения кода. И в самом деле, спустя некоторое время, проведенное за чтением HTML-кода, вы увидите, что такие элементы легче воспринимаются и запоминаются.. Для переноса текста на несколько строк тег ставится соответствующее количество раз.
Для переноса текста на несколько строк тег 
ставится соответствующее количество раз.
Тег
Тег 
указывает место переноса строки в тексте HTML страницы. Тег br ставится перед местом конца строки, текст после тега будет выведен с новой строки.
Стоит отметить, что тег 
устанавливает границу между строками (означает разрыв строки), а не делит текст на абзацы. Чтобы определить абзацы в тексте HTML документа используйте тег 
.
Отображение в браузере
В примере далее использован разрыв строк 
:
Текст первой строки.Текст второй строки.
Для сравнения, разделение текста на абзацы 
:
Текст первого абзаца.
Текст второго абзаца.
Пример использования 
в HTML коде
Тег
Тег 
в HTML определяет абзац. Браузеры автоматически добавляют отступы сверху и снизу от тега (обычно в размере 1em), но вы всегда можете поменять стили тега p с помощью каскадных таблиц стилей CSS. Внутри тегов абзаца 
может быть как простой текст, так и вложенные теги, например, ссылки , строчные элементы , теги выделения текста , и другие.
Отображение в браузере
Это текст первого абзаца со ссылкой на справочник тегов HTML внутри.
Это текст второго абзаца с выделенным словом внутри.
Пример использования 

в HTML коде

Следующая страница Перенос строки HTML
Отправить статью
17 комментариев к записи
Интересное и главное простое решение, надо запомнить, возможно пригодится в работе.
Юрий, спасибо! Очень ценная информация. Но как понять для какого браузера выбрать нужный код?
Елена, вот список префиксов, которые работают с этим свойством в разных браузерах:
p -webkit-hyphens: auto; /* для браузера Chrome и Safari */ -moz-hyphens: auto; /* для браузера Firefox */ -ms-hyphens: auto; /* для браузера Internet Explorer 10 */ hyphens: auto; > Но вам нужно писать обязательно все 4 свойства! Чтобы во всех этих браузерах был перенос слов.
вот и начали бы с себя..
Вам неудобно читать текст на моём сайте?
ни одного переноса в статье нет)
Переносы слов еще зависят от разрешения монитора: может быть такая ситуация, что на большом мониторе нет необходимости переносить слова, потому что они и так хорошо смотрятся.
Для примера я уменьшил ширину окна браузера (фото ниже):
Всё правильно человек написал:
Только это пока рабочий проект (см. – https://webref.ru/css/hyphens ), поэтому некоторый браузеры поддерживают это свойство, а некоторые – нет.
На большом мониторе под Windows – не работает, а вот на планшете Lenovo Yoga Tablet 2 – переносы работают…
Юрий, спасибо! Но у меня не перенос слов получился, а просто текст стал ровнее (каждая строчка точно вписывается от первой буквы первого слова, до последей буквы последнего в каждой строке), поразительно!
Я смотрю, это за счет увеличения пробелов. Видно у меня там еще какое-то правило прописано.
В приличных печатных изданиях переносы слов осуществляются по правилам русского языка. Видимо, CCS3 применяет какой-то общий алгоритм переноса для всех языков?
Надо для меню задать правило — переносим на новую строку все слова кроме первого.
2. Когда не помещаются
Виноват. Не для меню, а для названия модуля.
Ребят, на самом деле, если у вас не работают переносы, дело тут не в ширине окна браузера. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang=»ru» к элементу или непосредственно к абзацу текста.
Переносы не работают в Chrome и Opera.
Единственное кросс-браузерное решение — это вставить мягкие переносы (мнемокод «­») в места, где вы допускаете вставлять дефис и разбивать слово с последующим переносом в случае возможности (если ширина позволяет). Можно воспользоваться сервисом автоматической расстановки мягких переносов , вставляете, например, там текст «расставить переносы правильно» и получаете готовый html — «рас­ста­вить пе­ре­но­сы пра­виль­но» его вставляете у себя на сайте. Всё будет переноситься предсказуемо и кросс-браузерно.
Можете в сервисе ограничить длину слова в которых необходимо расставить мягкие переносы, если хотите разбивать только длинные слова. Потом можно это текст опять редактировать, просто вставив на том же сервисе туда, где его скопировали и т.д.
Переносы слов | htmlbook.ru
В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.
Использование тега
Тег введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем (пример 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. Использование  
В данном примере для корректного написания координат используется  , который не позволяет переносить текст.
Как убрать тег ?
Разбивая контент на несколько фрагментов HTML, начинающихся с новой строки, мы можем добиться определенного внешнего вида нашего текста на страницах сайта. Но здесь есть один нюанс. Дело в том, что при расстановке принудительных переносов, мы лишаем текст пластичности, как это происходит с текстом в теге
при отображении на различных мобильных устройствах.
В обычном абзаце текст, при уменьшении разрешения будет автоматически подстраивать под ширину блока, в котором он размещен.
В случае с размещением каждой новой фразы HTML с новой строки, при изменении ширины блока-контейнера, каждая фраза будет перестраиваться независимо друг от друга.
В случае, если нам данный вариант не подходит, мы можем на определенным разрешении скрыть тег , и наш тест начнет себя вести как обычный, в тег 
. Другими словами, мы принудительно убираем все, ранее расстановленные, разрывы.
Вот как это можно сделать:
@media (max-width: 780px) 
>
Вместо 780px указываете ту ширину экрана, начиная с которой вам нужно скрыть тег 
.
Если вам нужно убрать разрывы строки только в определенном блоке, то перед названием тега вам нужно указать класс или идентификатор родительского элемента, в котором расположен текст.
Более подробно о том, как делается адаптивность сайта под мобильные устройства вы можете прочитать в этой статье: Как делается адаптивная вёрстка сайта?
Использование тега 
для размещения текста HTML с новой строки может быть полезно при верстке каких-то небольших и узких блоков. Научившись использовать данный тег, вы можете манипулировать размером и расположением вашего контента, практически в любых ситуациях.
Желаю вам успехов в развитии ваших проектов!
С уважением Юлия Гусарь
Как создать перенос слов CSS — абзацы с переносом слов CSS

Продолжаем изучать возможности CSS3 и на очереди у нас перенос слов. Перенос слов является очень полезным свойством, потому что текст на странице смотрится красивее. Также, иногда приходится делать колонки как в газетах, и тогда выравнивание по правому или левому краю смотрится некрасиво. А вот если растянуть по всей ширине колонки, тогда и для глаза приятнее читать такой текст. Но и в этом случае есть такой нюанс как большие пространства между словами, что смотрится некрасиво. Это мы и будем исправлять в данном уроке.
Изучая статьи, которая подобрал для вас, выше, вы также узнаете массу полезных свойств, а также узнаете о новых возможностях CSS3, которая позволяет использовать меньше еще меньше изображений на сайте.
Перенос строк текста в HTML через тег
Итак, первый, самый популярный и в то же время специально созданный тег для переноса строк в тексте – это:
Вы могли также видеть этот тег и без слеша (косой черты) на конце:
Они оба одинаково выполняют свою роль, только первый является правильным (валидным) вариантом согласно спецификации XHTML 1.0 (теги, не имеющие закрывающей части, должны содержать слеш на конце).
Использовать его вы можете сколько угодно раз. Одно использование – один перенос строки, соответственно, два этих тега, поставленные подряд, дают двойной перенос.
Хочется отметить, что при переносе строки таким способом к ней не добавляется дополнительный отступ, который вы можете увидеть при использовании тега 
(о нем чуть ниже).
Сам по себе тег 
имеет поддержку атрибута «clear», который указывает на то, как обрабатывать следующую строку, если текст обтекает плавающий элемент.
Допустимые значения следующие:
all – отменяет обтекание элемента с обоих (левой и правой) сторон.
left – отменяет обтекание элемента с левой стороны.
right – отменяет обтекание элемента с правой стороны.
none – отменяет действие атрибута.
Обратите внимание, что если вы хотите сделать большой разрыв между двумя строками – использование тега является не лучшим решением. Суть тега – перенос строки, а не задание отступов
Приемлемое количество подряд используемых тегов (на мой взгляд) – 1–2.
Управлять переносом слов при hyphens: auto;
15 комментариев:
Анонимный Хорошая статья. Спасибо! NMitra Рада слышать! Анонимный здорово, спасибо Vit Simak white-space: pre-wrap; очень помогает, но только если он один указан или максимум с word-wrap: break-word; Анонимный ыва Людмила Горбач ваваы Максим Дунаевский Вот спасибо! Поправил свою CSS как тут написано — текст на кнопках стал нормально отображаться. NMitra Пожалуйста, рада помочь. Анонимный Спасибо, хорошая статья. Анонимный kjgtfrfghjkl Анонимный ‘); drop table forum; — lol NMitra Чего-чего? Дмитрий lang=»ru» лучше писать в
-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; word-wrap: break-word; NMitra Спасибо за дополнение! Dmitry Mycelin «’); drop table forum; — lol»Это гугловская форма комментариев вообще-то.
Переносы слов в HTML / Тяпк
Автоматический топорный перенос слов (без добавление дефисов).
Интересуемые значения свойства:
Светлое будущее. СSS cвойство hyphens
Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.

manual (используется по умолчанию)Слова переносятся только в тех местах текста, где добавлен спецсимвол (мягкий перенос) или тег . Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол при переносе слова добавлять дефис (как учили в школе), а тег нет.
autoБраузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.

Запрет переносов
Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел
Также у CSS свойства существует значеие , когда слова не переносятся, даже при наличии в тексте мягких переносов.
Перенос слов в CSS
Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства — word-wrap и word-break. Работу с ними и небольшие хитрости рассмотрим в данной статье.
Разбивка и перенос длинных слов.
Допустим, в нашем ограниченном по ширине контейнере, необходимо учесть такую коллизию как длинный текст.
На картинке мы видим, что текст вылазит за границу контейнера (элемента DIV). Для него написаны следующие свойства:
Если мы применим к нему дополнительно стиль
то информация, выходящая за границы будет просто обрезана. А нам нужен перенос.
Для указания, что в данном случае нам нужен перенос, воспользуемся word-wrap. По-умолчанию, значение этого свойства — normal, это соответствует случаю в примере 1. Давайте установим для него следующие значение:
Так мы достигаем желаемого результата — переноса длинного слова. Перенос выполняется с учетом внутренних отступов (
Перенос слов не по границе слов.
Если бы мы наш пример разбавили пробелами, то задавать значение word-wrap не пришлось бы, т.к. браузер автоматически выполняет нужные переносы. То есть вот так:
То как происходит разбивка управляется свойством CSS word-break. В примере 3 его значение установлено по умолчанию, оно соответствует вот такой установке:
word-break: keep-all; /* или normal */
Т.е. разбивка текста производится на границе слов. Но мы можем заставить браузер разбивать фразу в любом месте предложения:
Благодаря такой разбивке предложение испытало перенос посреди слова «Constant».
Специальные «непереносимые» пробелы.
Возникают ситуации, когда нужно запретить перенос слов, но и пробелы между словами оставить.
Для этого случая в HTML существует спец символ — Non-breakable-SPace — « ». Если в третьем примере мы заменим все пробелы данным символом, то получим похожую на пример № 1 картинку:
Как предотвратить перенос текста в ячейке таблицы
кто-нибудь знает, как я могу предотвратить обертывание текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее, чем данные под ним, но мне нужно, чтобы он отображался только на одной строке. Это нормально, если колонна очень широкая.
HTML моей (упрощенной) таблицы выглядит так:
сам заголовок завернут в div внутри th тег по причинам, относящимся к javascript на странице.
в таблица выходит с заголовками, обернутыми на несколько строк. Кажется, это происходит только тогда, когда таблица достаточно широка, так как браузер пытается избежать горизонтальной прокрутки. В моем случае, однако, я хочу горизонтальную прокрутку.
4 ответов
посмотреть white-space свойство, используемое следующим образом:
Это заставит содержимое для отображения на одной линии.
со связанной страницы, вот различные варианты для white-space :

нормальный 
Это значение указывает агентам пользователей сворачивать последовательности пробелов и прерывать строки, необходимые для заполнения полей строк.
pre 
Это значение предотвращает свертывание последовательностей пробелов агентами пользователей. Строки разбиваются только на сохраненные символы новой строки.
без переноса 
Это значение сворачивает пробел как для «нормального», но подавляет разрывы строк в тексте.
pre-wrap 
Это значение предотвращает свертывание последовательностей пробелов агентами пользователя. Строки разбиваются на сохраненные символы новой строки и по мере необходимости заполняют поля строк.
до строки 
Это значение указывает агентам пользователей свернуть последовательности пробелов. Строки разбиваются на сохраненные символы новой строки и по мере необходимости заполняют поля строк.

Перенос слов в CSS
Каскадные стили позволяют управлять переносом слов в выбранном контейнере. Для этих целей служат два свойства — word-wrap и word-break. Работу с ними и небольшие хитрости рассмотрим в данной статье.
Разбивка и перенос длинных слов.
Допустим, в нашем ограниченном по ширине контейнере, необходимо учесть такую коллизию как длинный текст.

На картинке мы видим, что текст вылазит за границу контейнера (элемента DIV). Для него написаны следующие свойства:
Если мы применим к нему дополнительно стиль
то информация, выходящая за границы будет просто обрезана. А нам нужен перенос.
Для указания, что в данном случае нам нужен перенос, воспользуемся word-wrap. По-умолчанию, значение этого свойства — normal, это соответствует случаю в примере 1. Давайте установим для него следующие значение:

Так мы достигаем желаемого результата — переноса длинного слова. Перенос выполняется с учетом внутренних отступов (padding).
Перенос слов не по границе слов.
Если бы мы наш пример разбавили пробелами, то задавать значение word-wrap не пришлось бы, т.к. браузер автоматически выполняет нужные переносы. То есть вот так:

То как происходит разбивка управляется свойством CSS word-break. В примере 3 его значение установлено по умолчанию, оно соответствует вот такой установке:
Похожие публикации:

Как сделать блоки в css
Как сделать вертикальный градиент css
Как сделать выравнивание в css
Как сделать границу в css

Запрет переноса слов через дефис [дубликат]
Использовать вместо обычного дефиса неразрывный ‑ — при нормальной кодировке (utf8) его можно просто писать как символ в тексте ‑ :
wi-fi wi-fi wi-fi wi-fi wi-fi wi-fi wi-fi wi-fi wi-fi wi-fi 
wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi 
wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi wi‑fi

Отслеживать

ответ дан 6 июл 2017 в 9:21

122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков

html
css


   Важное на Мете 
Связанные
Похожие
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как перенести текст в css
Поступаем аналогично, что делали в предыдущем пункте!
Word-break может принимать еще одно значение, которое нас интересует для переноса строк и слов на новую строку break-word
white — space
Свойство white — space указывает браузеру, как обрабатывать пробелы в тексте.
Пример
Как пишется
Как это понять
Если текста в элементе много (больше, чем может вместить ширина элемента), то по умолчанию браузер пытается переносить слова на новую строку. Перенос в общем случае выполняется по символам пробела либо по символам переноса строк. Разговор сейчас идёт именно про форматирование текста прямо внутри HTML. Ведь мы можем в HTML длинный абзац оставить одной строкой, а можем разбить на несколько строк, используя клавишу Enter. По умолчанию браузер игнорирует форматирование в HTML. Он ориентируется только на теги, и выводит текст на экран, опираясь на текущий способ обработки пробельных символов. Но мы можем изменить этот способ, используя различные значения свойства white — space .
normal
Если в строке есть несколько подряд идущих пробелов, то браузер схлопывает их в один пробел. Я из лесу вышел = Я из лесу вышел . Все переносы строк в HTML внутри тега также заменяются на пробел:
В итоге текст на странице переносится по пробелам, учитывая границы элемента.
nowrap
Подряд идущие пробелы и переносы строк обрабатываются так же, как и с normal , но браузер перестаёт учитывать границы элемента и выводит весь текст в одну строку.
Сохраняется всё форматирование из HTML, включая переносы строк и последовательности пробелов. Границы элемента игнорируются, и текст может выходить за них.
pre — wrap
Сохраняется всё форматирование из HTML, включая переносы строк и последовательности пробелов. В отличие от pre текст переносится автоматически при достижении границы элемента.
pre — line
Подряд идущие пробелы схлопываются, но остальное форматирование из HTML сохраняется, текст переносится в местах переноса строк в HTML. Текст переносится автоматически при достижении границ элемента.
break — spaces
Поведение аналогично pre — wrap , за исключением одного отличия. Мы помним, что при значении pre — wrap слова переносятся, учитывая границы элемента, но если за крайним словом у границы следуют несколько пробелов, то они сохраняются в той же строке. В варианте с break — spaces эти пробелы поведут себя сложнее. Какая-то их часть останется на той же строке, дополняя ширину элемента до максимально допустимой, а вторая часть пробелов перенесётся на новую строку.

Подсказки
�� Принудительно организовать перенос текста вне зависимости от форматирования можно с использованием тега 
. Поведение текста при использовании этого тега одинаково при любых значениях свойства white — space . Даже при значении nowrap текст будет переноситься в том месте, где используется 
.
На практике
Денис Ежков
�� Довольно часто значение white — space : pre используется при вёрстке исходного кода:
О переносах и запрете переноса строк в текстовом содержимом элементов
Поскольку размер окна браузера непостоянен, то переход на новую строку (перенос строки) в тексте, выводимом в окне браузера, происходит автоматически. То есть слово, которое не убирается на странице, целиком переносится на новую строку. При этом перенос происходит на месте пробела, а сам пробел игнорируется.
Если же на странице не убирается сложное слово, состоящее из двух слов, записанных через дефис (например, слово «блекло-голубой»), и первое слово с дефисом при этом убираются на странице, то перенос происходит после дефиса. То есть переносится только вторая часть слова (в нашем примере — слово «голубой»).
Организация переноса частей слов
Вышеуказанное правило можно использовать и для осуществления естественного переноса части слова. Например, если мы предполагаем, что слово при определённом разрешении экрана попадёт на конец строки и целиком на экране не уберётся, то можем разделить слоги в этом слове символом «дефис». Перенос части слова будет происходить именно после дефиса. Кстати, вместо самого символа «дефис» можно использовать и соответствующие ссылки на символ — - или - . Но, надо заметить, что использование дефиса для переноса части слова не всегда даёт нужный результат, так как у пользователей могут быть разные мониторы, разные видеокарты и разное разрешение экрана. Поэтому слово, вопреки нашим предположениям, может убраться на экране целиком или не убраться совсем, а дефис при этом останется внутри слова, что будет выглядеть не совсем естественно.
Перенос части слова, организованный с помощью символа «дефис» принято называть явным. Кроме явного переноса, в HTML существует также мягкий перенос, для организации которого используется ссылка на символ ­ (сокр. от англ. soft hyphen ) или ­ . Это непечатный символ и на экран он не выводится, но в случае переноса последующей части слова на новую строку, в верхней строке после оставшейся части слова браузер выводит символ «дефис», что будет выглядеть естественно. Для правильной организации таких переносов необходимо разделить ссылками ­ слоги всех слов, которые предположительно могут попасть на конец строки и не убраться целиком на экране при различном разрешении и масштабе. Дело это конечно хлопотное и требует затрат времени, но иногда игра стоит свеч.
Пример организации мягкого переноса:
Примечание: Надо заметить, что переносы частей слов органично смотрятся на экране только в случае, когда выравнивание текста в абзаце происходит по левому и правому краю одновременно, то есть когда стилевое свойство text-align для абзаца установлено в значение justify . При выравнивании же текста по левому краю абзаца переносы частей слов смотрятся, как минимум, странно. Их использование может быть оправдано лишь для слишком длинных слов, так как, при автоматическом переносе таких слов на новую строку целиком, в правой части абзаца образуются довольно большие пустоты.
Установка способа организации переносов средствами CSS
Способ организации переносов частей слов в блочных элементах определяется стилевым свойством hyphens , появившемся в стандарте CSS3. В качестве значений данного свойства могут использоваться ключевые слова:

none — слова не переносятся, даже при наличии в тексте ссылок на символ ­ ;
manual — переносы происходят только в точках, отмеченных с помощью ссылки на символ ­ или тега ;
auto — браузер будет автоматически добавлять переносы слов на основе встроенного словаря переносов. Язык используемого словаря должен быть установлен с помощью универсального атрибута lang в открывающем теге или в открывающем теге конкретного блочного элемента (например, абзаца). При данном способе учитываются также возможные точки переноса, отмеченные с помощью ссылки на символ ­ и тега ;
inherit — способ организации переносов будет унаследован от родительского элемента.

Примечание: Свойство hyphens было стандартизировано только в CSS3, а потому может не поддерживаться некоторыми браузерами. Ранее производителями некоторых браузеров были введены нестандартные свойства, которые и использовались веб-разработчиками:
-ms-hyphens — для Internet Explorer 
-webkit-hyphens — для Chrome, Safari, Androis и iOS 
-moz-hyphens — для Firefox
Однако браузер Chrome не поддерживал значение auto , поэтому автоматические переносы слов в нём не работали и не работают до сих пор.
Пример использования свойства hyphens :
Результат в браузере:
Принудительный перенос строк
Для организации принудительного переноса слова или перехода на новую строку в HTML используется одиночный тег 
(сокр. от англ. break — «разрыв»). Данный тег указывает браузеру, что все символы, стоящие за ним, должны быть перенесены на следующую строку. Пробелы, стоящие непосредственно перед тегом 
и сразу после него, при этом игнорируются.
Пример организации принудительного переноса:
Результат выполнения данного кода в браузере:
Организация переносов в неразрывных строках
Для указания места возможного переноса в длинных неразрывных строках (например, в URL) предназначен одиночный тег (сокр. от англ. word break — «разрыв слова»). Данный тег отличается от тега 
тем, что в месте расположения тега 
браузер обязательно выполняет перенос содержимого на новую строку, а встретив в коде элемент , браузер сначала анализирует ситуацию и выполняет перенос строки только по необходимости, если этого требует ширина родительского элемента.
Валидным тег стал только в HTML5 (см. спецификацию), хотя во многих браузерах он получил поддержку ещё задолго до этого. Собственных атрибутов у тега нет, но в нём могут использоваться универсальные атрибуты.
Пример использования тега в неразрывных строках:
Результат выполнения данного кода в браузере:
О запрете переноса слов
Бывают случаи, когда, например, сложное слово, состоящее из двух слов, записанных через дефис, или даже словосочетание должны целиком размещаться в одной строке. Нежелательно, например, разделять фамилию и инициалы, то есть переносить то или другое отдельно на новую строку. В одной строке должны находиться: односложные слова с последующим словом, цифры с последующими единицами измерения и длинное тире с предшествующим ему словом.
Для предотвращения разрыва таких слов и символов в тексте можно использовать, например, ссылку на символ   («неразрывный пробел»), вставляя её между словами вместо обычного пробела. Такая конструкция будет восприниматься браузером как единое слово и разрываться не будет. Главным недостатком этого способа борьбы за целостность является плохая читабельность исходного текста документа. В таком сплошном тексте очень сложно ориентироваться при редактировании.
Пример организации неразрывного текста с помощью «неразрывного пробела»:
До недавнего времени некоторые веб-разработчики для формирования неразрывных строк использовали также нестандартный парный тег (сокр. от англ. no-break — «без разрыва»). Текст, помещённый внутрь такого элемента, становится неразрывным и выводится в одной строке. В случае если данная строка не убирается на экране, в нижней части окна браузера появляются горизонтальные полосы прокрутки.
Пример использования тега :
Результат в браузере:
Элемент изначально поддерживается всеми браузерами, но не вошёл ни в одну из спецификаций HTML, а потому исходный код с использованием данного элемента не пройдёт проверку на валидаторе. Вместо него рекомендуется использовать средства CSS. Аналогом в CSS является свойство white-space .
С использованием средств CSS вышеприведённый пример будет выглядеть следующим образом:
Примечание: Внутри неразрывных строк, созданных с помощью элемента или средств CSS, явный перенос не выполняется и ссылка на символ   («место возможного переноса») игнорируется. Для указания места, где возможен перенос в такой строке, следует использовать тег .
Как в css перенести текст на другую строчку
Перенос слов CSS (свойства overflow-wrap, word-wrap, word-break, hyphens)
Управлять переносом слов при hyphens: auto;



Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:



Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:



word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:


Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

normal – слова не переносятся;
break-word – автоматический перенос слов;
inherit – наследование значения родителя.


В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.


normal – используются правила переноса, установленные по умолчанию;
word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.



hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:


none – отключает перенос слов в CSS ;
manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
auto – браузер автоматически переносит слова на основе своих настроек.



С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
Задав свойству white-space значение « nowrap » ( white-space: nowrap ).


Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.
Похожие публикации:

Как выучить html и css с нуля самостоятельно
Как добавить css к html
Как убрать перенос текста в css
Как убрать расстояние между блоками в css

Читать:
Как сделать сервер на компьютере под виндовс 10