Wrap css что это

Как в CSS решить проблему длинных слов

Веб-пространство построено на контенте, а контент состоит из слов, и возможно из очень длинных. Всем « участникам » всемирной паутины рано или поздно приходится иметь дело с длинными словами:

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

Переносы

Первое решение для длинных слов — это применение переносов.

word-break

Overflow-wrap

Еще одно возможное решение данной проблемы — использование word-wrap ( overflow-wrap ). Еще одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:

Эллипсис

Еще один вариант для решения проблемы длинных слов — это усечение:

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

Заключение

В интернете можно найти и такое решение :

В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.

Окончательное решение

Этот код выводит переносы во всех браузерах, в которых они поддерживаются, и разрывы строк во всех остальных. Хотя я и протестировал это решение в 26 различных браузерах, но до сих пор не уверен, что оно будет работать в 100% случаев — если вы найдете какое-нибудь исключение, пожалуйста, дайте знать об этом в комментариях к статье.

Источник

Wrapping and breaking text

This guide explains the various ways in which overflowing text can be managed in CSS.

What is overflowing text?

In CSS, if you have an unbreakable string such as a very long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in.

Finding the min-content size

Using min-content is therefore one possibility for overflowing boxes. If it is possible to allow the box to grow to be the minimum size required for the content, but no bigger, using this keyword will give you that size.

Breaking long words

If the box needs to be a fixed size, or you are keen to ensure that long words can’t overflow, then the overflow-wrap property can help. This property will break a word once it is too long to fit on a line by itself.

In this next example, you can compare the difference between the two properties on the same string of text.

This might be useful if you want to prevent a large gap from appearing if there is just enough space for the string. Or, where there is another element that you would not want the break to happen immediately after.

In the example below there is a checkbox and label. Let’s say, you want the label to break should it be too long for the box. However, you don’t want it to break directly after the checkbox.

Adding hyphens

element»>The element

If you know where you want a long string to break, then it is also possible to insert the HTML element. This can be useful in cases such as displaying a long URL on a page. You can then add the property in order to break the string in sensible places that will make it easier to read.

Источник

Передряги при переносах

Почему-то мне как-то особенно «везет» на странные, неожиданные фокусы с переносом текста.

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

Вставлять дефис в месте переноса или нет? Здесь переносим, там не переносим. Тут вставляем дефис, там нет. Одно свойство ни в какую не хочет работать без другого. И почему этот горизонтальный скроллинг упорно не хочет пропадать?

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

Свойства

В конце концов при решении проблем с переносом текста остается некий типичный «список подозреваемых». Одни довольно очевидные и логичные, а другие — нет. Одни делают свое дело сами по себе, а другие не очень.

Итак, давайте взглянем.

word-wrap / overflow-wrap

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

В первом примере этого демо можно наглядно увидеть поведение по умолчанию:

word-break

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

hyphens

Значение none гарантирует, что в слова никогда не будет подставляться символ переноса.

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

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

white-space

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

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

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

nowrap (пример 2) также игнорирует дополнительные пробелы, но зато не разбивает строку текста на границах контейнера.

pre учитывает все пробельные символы в разметке, и не разбивает строки (как видно выше в примере 3).

pre-wrap (пример 4) учитывает добавочные пробелы, но заставляет строку разбиваться.

pre-line (последний пятый пример) схлопывает пробельные символы (кроме перевода строки) и принуждает «цепочку» текста умещаться в контейнер.

Строки кода в блоке

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

По моему опыту, обычно решение зависит от того, на каком языке этот код, и вообще от задачи, но эти проблемы можно обойти при помощи принудительных переносов (без дефиса!) или горизонтального скроллинга. Методом проб и ошибок можно понять, какое точное сочетание свойств нужно тому или иному браузеру. Убедитесь, что значение white-space случайно не переопределилось на одно из тех, при которых пробелы схлопываются, потому что это может оказаться значимым для синтаксиса кода.

Также я нарвалась на проблемы с адаптивностью при оформлении кода для github (gist), который особенно коварен из-за того, что это table. В таких случаях я понимаю, что мне придётся применить особенное оформление для переопределения контейнера таблицы.

Многоточие со смыслом

Как по мне, CSS-объявление text-overflow: ellipsis; — какая-то шляпа. Оно очень капризное и работает только при сочетании с группой других свойств. К тому же оно применяется только к единственной строке текста, что делает его не особо полезным.

С jQuery-плагином dotdotdot можно расставить многоточие в нескольких строках текста и даже добавить в конце ссылку для продолжения чтения.

Вот быстрый примерчик:

Перенос только в строго определенном месте

Порой необходимо, чтобы слова разрывались только в строго определённых местах, где в этом есть смысл, что добавляет ещё один уровень сложности; как же сообщить эти точки разрыва браузеру?

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

Слишком длинные ссылки

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

По умолчанию такие ссылки не разрываются и вызывают всяческие неприятности на небольших экранах. При необходимости URL’ы должны разрываться без дефиса, поскольку ссылка в таком случае будет нерабочей. Также здесь нужно быть осторожным, поскольку, если вы такое допустите, то разорвутся не только URL’ы, но и все слова.

overflow-wrap: break-word; на ссылке гарантирует, что URL разорвётся в границах контейнера и переполнения не будет, хотя добиться кроссбраузерности тут не так просто, как можно было бы подумать.

Заключение (Ха!)

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

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

Источник

2.5. CSS-текст

Модуль CSS-текст описывает функции CSS, которые управляют переводом исходного текста в форматированный и переносом строк. Различные свойства CSS обеспечивают контроль над преобразованием регистра, обработкой пробелов, правилами переноса и переносом текста и строк, выравниванием, интервалами и отступами.

Основной единицей текста является символ. Тем не менее, поскольку системы письма не всегда так просты, как основной английский алфавит, то, чем на самом деле является символ, зависит от контекста, в котором используется этот термин. Например, в корейской системе письма каждое квадратное представление слога (например, 한 = хань) можно считать символом. Однако квадратный символ действительно состоит из нескольких букв, каждая из которых представляет фонему (например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

1. Преобразование текста: свойство text-transform

Свойство text-transform стилизует текст. Оно не влияет на базовое содержимое и не должно влиять на содержимое операции копирования и вставки простого текста.

2. Обработка пробелов и переносы строк: свойство white-space

Свойство white-space обрабатывает пробелы между словами и переносы строк внутри элемента.

3. Настройка табуляции: свойство tab-size

Работает только для элементов

4. Разрыв строки и границы слов

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

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

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

4.1. Правила разрыва для букв: свойство word-break

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

4.2. Разрыв строки: line-break

Свойство line-break определяет правила переноса строк, применяемых внутри элемента, в частности то, как перенос взаимодействует со знаками препинания и символами.

4.3. Расстановка переносов: свойство hyphens

Свойство hyphens определяет, разрешено ли использование переносов для создания возможностей мягкого переноса внутри строки текста.

Расстановка переносов — это контролируемое разбиение слов, при котором им обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как правило, разбиение слов происходит по слоговым или морфемным границам и при визуальном указании на разделение (обычно путем вставки дефиса, ‐ ). В некоторых случаях переносы могут также изменить написание слова. В любом случае, перенос слов является только эффектом рендеринга: он не должен влиять ни на содержимое документа, ни на выбор текста или поиск.

CSS Text Level 3 не определяет точные правила переноса слов, поэтому рекомендуется выбирать подходящие для языка точки переноса.

4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

Свойство overflow-wrap (или его устаревшее имя word-wrap ) указывает, может ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить переполнение линейного блока. Работает в том случае, когда свойство white-space разрешает перенос.

5. Выравнивание и выключка строк

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

5.1. Краткая запись для выравнивания текста: свойство text-align

5.2. Выравнивание текста по умолчанию: свойство text-align-all

5.3. Выравнивание последней строки: свойство text-align-last

Свойство text-align-last описывает, как выравнивается последняя строка блока или строки непосредственно перед принудительным разрывом строки.

6. Промежутки

6.1. Промежутки между словами: свойство word-spacing

Свойство word-spacing определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине.

6.2. Трекинг: свойство letter-spacing

7. Отступ первой строки: свойство text-indent

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

Источник

Свойство overflow-wrap

Дата публикации: 2017-02-09

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

Значения

normal: значение по умолчанию. Браузер разрывает строки по стандартным правилам разрыва. Слова и неразрывные строки не отделяются, даже если они выходят за рамки контейнера.

break-word: слова или строки символов, которые не вмещаются в контейнер, разрываются в произвольном месте и часть символов переходит на новую строку. Тире не вставляется, даже если указано свойство hyphens.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

inherit: целевой элемент наследует значение свойства overflow-wrap от ближайшего родителя.

В демо ниже есть специальная кнопка переключения между значениями normal и break-word.

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

Строка из неразрывных пробелов ( ) будет также разорвана в подходящем месте.

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

Сходство со свойством word-break

Свойства overflow-wrap и word-break очень похожи, их можно использовать для решения одних и тех же проблем. Краткое обобщение различий, объясненных в CSS спецификации:

overflow-wrap в основном используется для разрыва длинных строк, ломающих макеты, когда текст вылезает за пределы контейнера;

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

word-break устанавливает мягкие способы разрыва букв, в основном ассоциируется с китайским, японским и корейским языками (CJK).

После примеров использования свойства word-break в CJK контенте спецификация говорит: «если нужно разорвать строку только из-за того, что она вылезает за пределы контейнера, смотрите свойство overflow-wrap».

Теперь мы можем предположить, что свойство word-break подходит для неанглийского контента, в котором нужны определенные правила разрыва слов. Эти правила могут перемешиваться с английским контентом. Свойство overflow-wrap необходимо использовать для предотвращения поломки макета из-за слишком длинных строк, вне зависимости от языка.

История свойства word-wrap

Свойство overflow-wrap является потомком свойства word-wrap. Свойство word-wrap изначально было свойством только для IE, но в конечном итоге стало поддерживаться во всех браузерах. Однако стандартом оно так и не стало.

Свойство word-wrap принимает те же значения, что и overflow-wrap, и ведет себя точно так же. В спецификации говорится, что браузеры «должны распознавать word-wrap как альтернативное название свойства overflow-wrap, как если бы это была сокращенная версия данного свойства». Также все юзер агенты должны постоянно поддерживать свойство word-wrap для совместимости со старыми версиями.

Оба свойства overflow-wrap и word-wrap проходят CSS валидацию при проверке на CSS3 и выше (сейчас по умолчанию).

Поддержка в браузерах

Данные о поддержке взяты с сайта Caniuse, где также сказано, что свойство находится в статусе W3C Working Draft.

«Частичная» поддержка на сайте CanIUse вызвана тем, что старые браузеры поддерживают старое свойство word-wrap, а не overflow-wrap. Использование обоих свойств обеспечит вам обратную совместимость.

В редакторском черновике спецификации на W3C прописано новое значение break-spaces, которое работает с «зарезервированным» символами пробела. Данное значение не поддерживается ни в одном браузере и не прописано в рабочем черновике спецификации.

Автор: Louis Lazaris

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник