Wrap text что это
textwrap — Обёртывание и заполнение текста¶
Исходный код: Lib/textwrap.py
Оборачивает отдельный абзац в text (строку), поэтому длина каждой строки не превышает width символов. Возвращает список строк вывода без финальных символов новой строки.
Оборачивает отдельный абзац в text и возвращает единственную строку, содержащую обернутый абзац. fill() — это сокращение для:
Свернуть и усечь данный text, чтобы он соответствовал данному width.
Сначала сворачиваются пробелы в text (все пробелы заменяются одиночными пробелами). Если результат соответствует width, он возвращается. В противном случае с конца отбрасывается достаточно слов, чтобы оставшиеся слова плюс placeholder поместились в width :
Добавлено в версии 3.4.
Удалить все общие начальные пробелы из каждой строки в text.
Это можно использовать для выравнивания строк в тройных кавычках с левым краем отображения, при этом они будут отображаться в исходном коде в форме с отступом.
Обратите внимание, что табуляция и пробелы обрабатываются как пробелы, но они не равны: считается, что строки » hello» и «\thello» не содержат общих ведущих пробелов.
Строки, содержащие только пробелы, игнорируются на входе и нормализуются до одного символа новой строки на выходе.
Добавить prefix в начало выбранных строк в text.
По умолчанию prefix добавляется ко всем строкам, которые не состоят исключительно из пробелов (включая любые окончания строк).
Необязательный аргумент predicate можно использовать для управления отступом строк. Например, легко добавить prefix даже к пустым строкам и строкам, состоящим только из пробелов:
Добавлено в версии 3.3.
Текст предпочтительно размещать по пробелам и сразу после дефисов в словах с переносом; только тогда длинные слова будут разбиты, если необходимо, если TextWrapper.break_long_words не установлен в ложь.
class textwrap. TextWrapper ( **kwargs ) ¶
Конструктор TextWrapper принимает ряд необязательных ключевых аргументов. Каждый ключевой аргумент соответствует атрибуту экземпляра, например:
Вы можете повторно использовать один и тот же объект TextWrapper много раз, и вы можете изменить любые его параметры, напрямую назначая атрибуты экземпляра между применениями.
Атрибуты экземпляра TextWrapper (и ключевые аргументы конструктора) следующие:
(По умолчанию: True ) Если истинно, то все символы табуляции в text будут заменены пробелами с использованием метода expandtabs() из text.
(По умолчанию: 8 ) Если expand_tabs истинно, то все символы табуляции в text будут расширены до нуля или более пробелов, в зависимости от текущего столбца и заданного размера табуляции.
Добавлено в версии 3.3.
(По умолчанию: True ) Если истинно, после раскрытия табуляции, но перед переносом, метод wrap() заменит каждый пробельный символ одним пробелом. Заменяются следующие символы пробела: табуляция, новая строка, вертикальная табуляция, перевод страницы и возврат каретки ( ‘\t\n\v\f\r’ ).
Если expand_tabs ложно, а replace_whitespace — истина, каждый символ табуляции будет заменён одним пробелом, который не совпадает с расширением табуляции.
Если replace_whitespace ложно, новые строки могут появиться в середине строки и вызвать странный вывод. По этой причине текст должен быть разделен на абзацы (используя str.splitlines() или аналогичный), которые обёрнуты отдельно.
(По умолчанию: True ) если истинно, пробелы в начале и конце каждой строки (после переноса, но до отступа) удаляются. Однако пробел в начале абзаца не удаляется, если за ним следует не пробел. Если отбрасываемый пробел занимает всю строку, вся строка удаляется.
(По умолчанию: » ) строка, которая будет добавлена к первой строке обёрнутого вывода. Считается по длине первой строки. Пустая строка без отступа.
(По умолчанию: » ) Строка, которая будет добавлена ко всем строкам обёрнутого вывода, кроме первой. Учитывается длина каждой строки, кроме первой.
Поскольку алгоритм обнаружения предложений основан на string.lowercase для определения «строчной буквы» и соглашении об использовании двух пробелов после точки для разделения предложений в одной строке, он специфичен для англоязычных текстов.
(По умолчанию: True ) Если истинно, перенос будет происходить предпочтительно по пробелам и сразу после дефисов в составных словах, как это принято в английском языке. Если ложно, только пробелы будут рассматриваться как потенциально хорошие места для разрывов строк, но вам нужно установить break_long_words в ложь, если вы хотите действительно незащищенные слова. По умолчанию в предыдущих версиях всегда разрешалось разбивать слова через дефис.
Добавлено в версии 3.4.
(По умолчанию: ‘ [. ]’ ) строка, которая появится в конце выходного текста, если он был усечён.
Добавлено в версии 3.4.
TextWrapper также предоставляет некоторые общедоступные методы, аналогичные вспомогательным функциям на уровне модуля:
Оборачивает отдельный абзац в text и возвращает единственную строку, содержащую обёрнутый абзац.
CSS: о выводе коротких и длинных текстов
Когда, пользуясь возможностями CSS, создают макет страницы, важно учитывать то, что в различных элементах этой страницы могут выводиться короткие и длинные текстовые материалы. Страницы, кроме того, нужно тестировать на предмет того, как они отображают тексты разной длины. Если разработчик чётко понимает то, как обрабатывать различные тексты, выводимые на странице, если он соответствующим образом спроектировал макет, это способно избавить его от множества неприятных неожиданностей.
Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.
Обзор проблем
Прежде чем я расскажу о том, как работать с текстами средствами CSS, мне хотелось бы остановиться на проблемах, связанных с выводом текстов. Предположим, у нас есть вертикальное меню.
Вертикальное меню при переносе имени пользователя на вторую строку выглядит необычно
В начале меню выводится имя пользователя. Длина имени может варьироваться. Особенно — если речь идёт о мультиязычных сайтах. В правой части вышеприведённого примера видно, что имя пользователя, при достижении им определённой длины, занимает две строки. По этому поводу можно задаться несколькими вопросами:
Слово вышло за пределы контейнера
Фронтенд-разработчик должен быть готов к такому, заранее приняв решение о том, как страница должна вести себя в подобных ситуациях. К счастью, существуют CSS-свойства, созданные специально для того чтобы решать подобные проблемы.
Кроме того, проблемы на страницах могут вызывать не только слишком длинные, но и слишком короткие тексты. Вывод короткого текста в элементе, не рассчитанном на такой текст, может либо «сломать» интерфейс, либо, как минимум, сделать так, что этот элемент будет странно выглядеть. Вот пример.
Кнопка, в которой выводится слишком короткий текст, выглядит необычно
Как видите, проблемы могут возникать как при выводе длинных, так и при выводе коротких текстов. Но, прибегнув к некоторым возможностям CSS, мы можем, по меньшей мере, ослабить влияние этих проблем на внешний вид и работоспособность страниц.
Длинные тексты
Теперь, когда мы обсудили проблемы, поговорим о возможностях CSS, которые позволяют наладить нормальную работу с длинными текстами.
▍Свойство overflow-wrap
Свойство overflow-wrap позволяет сообщить браузеру о том, что он должен разорвать слово, перенеся его на новую строку, в том случае, если слово не помещается в контейнер.
Без использования свойства overflow-wrap слово выходит за пределы контейнера
▍Свойство hyphens
Без использования свойства hyphens браузер не переносит слово на новую строку
Применяя значение auto свойства hyphens важно помнить о том, что браузер будет переносить любое слово, которое не помещается в строку. Что это значит? Взгляните на следующий рисунок.
Браузер может использовать знак переноса в любом слове
Обратите внимание на то, что браузер использовал знак переноса в слове, которое вполне может быть целиком перенесено на новую строку. При использовании свойства hyphens: auto браузер способен разрывать даже такие слова, которые не выходят за пределы контейнеров.
▍Обрезка однострочного текста
При обрезке текста, для вывода которого предусмотрено поле, вмещающее лишь одну строку, предложение укорачивается, а в его конец добавляется многоточие, указывающее на то, что текст, на самом деле, длиннее того фрагмента, который выведен на экране.
Слева — однострочный текст, при выводе которого обрезка не используется. Справа — текст, при выводе которого используется обрезка
В CSS нет свойства, которое могло бы называться «text-truncation», применимого для настройки автоматической обрезки текстов. Тут нам понадобится комбинация из нескольких свойств:
▍Обрезка многострочного текста
Если нужно обрезать текст, для вывода которого предусмотрено поле, вмещающее несколько строк, нужно прибегнуть к CSS-свойству line-clamp :
Сравнение обрезки однострочного и многострочного текста
Настройка свойства padding приводит к нарушению вывода текста
▍Вывод длинных текстов в полях, поддерживающих горизонтальную прокрутку
В некоторых ситуациях непрактично организовывать разрыв слов или их перенос на новые строки с использованием дефиса. Например, если имеется поле, в котором должен выводиться фрагмент JavaScript-кода, такой код будет тяжело читать в том случае, если слова будут выводиться с переносом на новые строки. В подобном случае облегчить работу с текстом можно, предусмотрев возможность горизонтальной прокрутки содержимого поля.
Поле, в котором осуществляется перенос слов на новые строки, и поле, в котором применяется горизонтальная прокрутка
▍Свойство padding
Проблема при выводе подписи к флажку
Тут имеется набор флажков. Подпись одного из них выводится слишком близко к другому. Причина этого заключается в том, что при проектировании макета, используемого для вывода флажков, не настроены промежутки между ячейками сетки, в которых размещены данные. Этот пример, кстати, взят с реального сайта (Techcrunch).
Короткие тексты
Я знаю о том, что проблемы, связанные с короткими текстами распространены не так сильно, как проблемы, связанные с длинными текстами. Но возможность их возникновения, всё равно, очень важно учитывать при проектировании пользовательских интерфейсов.
▍Установка минимальной ширины элемента
Кнопка, в которой выводится слишком короткий текст
Результаты настройки минимальной ширины кнопки
Теперь, когда мы поговорили о проблемах вывода длинных и коротких текстов и о решениях этих проблем, давайте разберём несколько практических примеров.
Практические примеры
▍Карточка профиля пользователя
Карточки профиля пользователя часто содержат достаточно длинные тексты. В частности, проектируя подобную карточку, разработчику почти невозможно заранее узнать о том, насколько длинным будет имя пользователя. Как же быть?
Имя пользователя обычной длины, помещающееся на карточке целиком. Обрезанное длинное имя, выводимое в одной строке. Обрезанное длинное имя, выводимое в нескольких строках
Проектируя подобную карточку можно подготовиться к выводу в ней длинного имени пользователя, применив один из следующих двух приёмов:
Как видите, длинный текст можно обрезать, выведя его либо в одной строке, либо — в нескольких строках.
▍Навигационные элементы
При работе над макетами мультиязычных сайтов нужно учитывать тот факт, что тексты, имеющие один и тот же смысл, но написанные на разных языках, могут иметь различную длину.
Названия навигационных элементов, выведенные на разных языках
Длина слова About из LTR-языка больше, чем длина аналогичного по смыслу слова из RTL-языка. При выводе на таком языке соответствующий пункт навигационного меню выглядит слишком коротким. Известно, что если в дизайне страниц используются маленькие области, с которыми нужно взаимодействовать пользователям, это плохо сказывается на UX. Как исправить проблему? В данном случае можно просто настроить минимальную ширину навигационного элемента:
Решение проблемы короткого текста
Если вас интересуют вопросы вывода данных на разных языках — взгляните на этот мой материал.
▍Поле для вывода содержимого статей
В полях для вывода объёмных текстов вполне могут попадаться очень длинные слова, не помещающиеся в контейнеры. Особенно часто с этим можно столкнуться при работе с сайтами на мобильных устройствах.
Длинное слово выходит за пределы контейнера
Например, эту проблему можно решить так:
▍Оформление виртуальной корзины для покупок
Названия товаров, которые покупатели интернет-магазинов «кладут» в корзины, могут быть очень разными. Это может быть и одно слово, и несколько строк. В следующем примере длина названия товара такова, что текст перекрывается кнопкой для удаления товара из корзины. Причина этого в том, что при проектировании макета корзины не было уделено достаточного внимания настройке расстояния между элементами.
Вывод коротких и длинных названий в макете, который настроен неправильно
Решить эту проблему можно, настроив внутренние или внешние отступы элементов. Конкретные действия зависят от ситуации. Здесь я приведу простой пример, предусматривающий использование свойства margin-right при настройке элемента, выводящего название товара.
▍Flexbox-макеты и вывод длинных текстов
При выводе длинных текстов во Flexbox-макетах возможна ситуация, когда такие тексты переполняют родительские элементы. Взгляните на следующий пример.
Элементы выглядят нормально
Вот разметка к этому примеру:
Если имя пользователя не слишком длинно — всё выглядит нормально. Но что случится в том случае, если имя окажется достаточно длинным? В такой ситуации текст переполнит родительский элемент, а это «поломает» макет.
Длинное имя пользователя портит внешний вид страницы
После этого даже вывод в элементе длинного имени пользователя не испортит макет. Некоторые подробности об использовании свойства min-width при разработке Flexbox-макетов вы можете найти в этом материале.
Итоги
Надеюсь, теперь вы сможете справиться с проектированием элементов, поддерживающих аккуратный вывод длинных и коротких текстов. Я с большим удовольствием писал эту статью. Я, благодаря этому, вспомнил некоторые тонкости работы с разными текстами. А статья будет служить мне хорошим напоминанием о том, как важно обращать внимание на подготовку элементов страниц к выводу текстов разной длины.
Сталкивались ли вы с проблемами, связанными с выводом текстов разной длины на веб-страницах?
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.
Text (текст)
Документация и примеры общих текстовых утилит для управления выравниванием, обтеканием, весом и т.д.
Выравнивание текста
Простое выравнивание текста по компонентам с помощью классов выравнивания текста. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки ширины окна просмотра, что и система сетки.
Текст с выравниванием по левому краю для всех размеров области просмотра.
Выровненный по центру текст на всех размерах области просмотра.
Текст с выравниванием по правому краю для всех размеров области просмотра.
Текст с выравниванием по левому краю в области просмотра размером SM (маленький) или шире.
Текст с выравниванием по левому краю в области просмотра размером MD (средний) или шире.
Текст с выравниванием по левому краю в области просмотра размером LG (большой) или шире.
Текст с выравниванием по левому краю в области просмотра размером XL (очень большой) или шире.
Перенос текста и переполнение
Word break (разрыв слова)
Text transform
Преобразование текста в компонентах с помощью классов капитализации текста.
Текст в нижнем регистре.
Текст в верхнем регистре.
Толщина шрифта и курсив
Быстро измените толщину (жирность) текста или выделите текст курсивом.
Более жирный текст (относительно родительского элемента).
Текст нормального веса.
Более легкий текст (относительно родительского элемента).
Текст без стиля шрифта
Line height
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Nullam id dolor id nibh ultricies Vehicula ut id elit. Cras mattis Concectetur Purus Sit Amet Fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Nullam id dolor id nibh ultricies Vehicula ut id elit. Cras mattis Concectetur Purus Sit Amet Fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Nullam id dolor id nibh ultricies Vehicula ut id elit. Cras mattis Concectetur Purus Sit Amet Fermentum.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Cras mattis pannenkoek purus sit amet fermentum. Praesentmodo cursus magna, vel scelerisque nisl conctetur et. Nullam id dolor id nibh ultricies Vehicula ut id elit. Cras mattis Concectetur Purus Sit Amet Fermentum.
Monospace (моноширинный)
Это в моноширинном пространстве
Сбросить цвет
Оформление текста
Украшайте текст в компонентах классами оформления текста.
Под этим текстом есть линия.
Этот текст проходит через линию.
Разработан и построен с любовью к миру, командой Bootstrap и помощью наших участников.
В настоящее время v5.0.0-alpha1. Код под лицензией MIT, документы CC BY 3.0.
Как в CSS решить проблему длинных слов
Веб-пространство построено на контенте, а контент состоит из слов, и возможно из очень длинных. Всем « участникам » всемирной паутины рано или поздно приходится иметь дело с длинными словами:
Каждый день в сети я встречаю практически все виды дефектов отображения, связанных с длинными словами – « сломанные » макеты, обрезку слов и ситуацию, которая приведена на изображении выше.
Переносы
Первое решение для длинных слов — это применение переносов.
word-break
Overflow-wrap
Еще одно возможное решение данной проблемы — использование word-wrap ( overflow-wrap ). Еще одно свойство, которое указывает, может ли браузер разбивать строки внутри слов:
Эллипсис
Еще один вариант для решения проблемы длинных слов — это усечение:
На первый взгляд кажется, что этот метод неплохо справляется с нашей проблемой, но он имеет ряд недостатков. Прежде всего, он будет обрезать любой текст, занимающий более одной строки, даже если вы использовали короткие слова, и они прекрасно разместились бы в нескольких строках. Кроме этого слова могут обрезаться так, что исходное слово будет приобретать другое значение.
Заключение
В интернете можно найти и такое решение :
В то же время overflow-wrap прекрасно поддерживается браузерами. Я протестировал следующее решение, используя overflow-wrap и перенос.
Окончательное решение
Этот код выводит переносы во всех браузерах, в которых они поддерживаются, и разрывы строк во всех остальных. Хотя я и протестировал это решение в 26 различных браузерах, но до сих пор не уверен, что оно будет работать в 100% случаев — если вы найдете какое-нибудь исключение, пожалуйста, дайте знать об этом в комментариях к статье.