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

Как реализуется перенос текста CSS?

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

Зачем переносить «непереносимое»

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

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

Решаем проблему переноса слов с помощью HTML

Как реализовать CSS перенос слов

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

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

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

должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

Как реализовать запрет переноса слов CSS

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

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

Источник

css не переносить текст

Указанные ниже свойства CSS определяют как переносить длинные слова:

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

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

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

Скажем, пункт меню или кнопка будут нехорошо выглядеть, если разъедутся на части. Поэтому надо запретить их разделение. Для чего все вышеуказанные свойства следует поставить в режим «по умолчанию» и добавить white-space: pre; или white-space: nowrap;. Нажмите на white-space: nowrap; и посмотрите на наш полигон.

Управлять переносом слов при 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»
Это гугловская форма комментариев вообще-то. 🙂

Бывает необходимо запретить переносить текст по строкам если он не помещается по ширине. Это можно сделать с помощью тега nobr:

Этого же можно добиться при помощи CSS-стиля white-space, заданного текстовому элементу-контейнеру. Например:

Второй вариант более предпочтителен (тег nobr отсутствует в стандарте XHTML).

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

Зачем переносить «непереносимое»

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

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

Решаем проблему переноса слов с помощью HTML

Перенос слов средствами CSS

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

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

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

должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

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

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

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

Источник

Всё, что нужно знать об автоматических переносах в CSS

Недавно меня пригласили выступить с вечерней лекцией в Типографском обществе Австрии. Для меня стало большой честью последовать по стопам таких светил, как Мэтью Картер, Вим Краувел, Маргарет Калверт, Эрик Шпикерман и покойная Фреда Сэк.

Я рассказал о некоторых золотых правилах типографики в интернете, а потом во время секции QA меня спросили о текущей ситуации с автоматическими переносами в вебе. Это хороший вопрос, особенно с учётом того, что немецкий язык знаменит часто используемыми длинными существительными (например, Verbesserungsvorschlag означает «предложение для улучшения»), поэтому переносы широко используются в большинстве письменных носителей.

В вебе автоматические переносы появились в 2011 году и теперь широко поддерживаются. Safari, Firefox и Internet Explorer 9 поддерживают их на всех платформах, а Chrome — на Android и MacOS (пока нет на Windows или Linux).

Как включить автоматические переносы

Автоматические переносы запускаются в два шага. Первый — установить язык для текста. Это сообщит браузеру, какой использовать словарь. Для корректных переносов нужен словарь переносов, соответствующий языку текста. Если браузер не знает языка текста, то рекомендации CSS говорят не активировать переносы, даже если они включены в таблице стилей.

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

1. Установка языка

Язык веб-страницы устанавливается с помощью атрибута HTML lang :

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

Атрибут lang=»en» применяет языковой тег ISO, сообщая браузеру, что текст на английском языке. В этом случае браузер выберет дефолтный английский словарь переносов, что обычно соответствует переносам и в американском английском. Хотя американский и британский английский заметно отличаются в орфографии и произношении (и, следовательно, переносах), но разница не такая существенная, как между вариантами португальского. Проблема решается добавлением «региона», чтобы браузер знал, какой вариант английского наиболее подходит в качестве словаря переносов. Например, чтобы указать бразильский португальский или британский английский:

2. Включение переносов

После установки языка можно включить автоматические переносы в CSS. Это исключительно просто:

В настоящее время Safari и IE/Edge требуют префиксов, поэтому прямо сейчас следует написать так:

Управление переносами

Но недостаточно просто включить функцию в CSS. В спецификациях CSS Text Module Level 4 появилась возможность управлять переносами, как в программах для вёрстки (например, InDesign) и некоторых текстовых редакторах (включая Word). Эти элементы управления позволяют разными способами установить количество переносов в тексте.

Ограничение длины слова и количества символов до и после переноса

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

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

hyphenate-limit-chars в действии

В настоящее время это свойство поддерживает только IE/Edge (с префиксом), а Safari ограничивает количество символов через устаревшее свойство из предыдущего черновика CSS3 Text Module. Это означает, что вы можете добиться одинакового эффекта в Edge и Safari (с перспективным планированием для Firefox) с помощью такого кода:

Ограничение числа последовательных переносов

Свойство hyphenate-limit-lines предотвращает лесенку

Запрет переносов в последней строке абзаца

В настоящее время свойство поддерживается только в IE/Edge (с префиксом).

Уменьшение количества дефисов путём установки зоны переноса

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

Для этого нужно указать максимальное допустимое количество пробелов между последним словом строки и краем текстового поля. Если в данном пространстве начинается новое слово, оно не переносится. Это пространство известно как зона переноса. Чем больше зона переноса, тем сильнее неровность и тем меньше переносов. Регулируя зону, вы ищете оптимальное соотношение между количеством дефисов и заполнением строки.

Слева: стрелки указывают строки, где перенос разрешён. Справа: перенос с заданной зоной переноса

В настоящее время поддерживается только в IE/Edge (с префиксом).

Всё вместе

С помощью свойств CSS Text Module Level 4 установим для абзаца те же параметры управления переносами, как в обычных программах для вёрстки:

C соответствующими префиксами и откатами код выглядит так:

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

Источник

Проблемы с переносом слов

Я написал электронную книгу, и это был сущий кошмар, когда мне приходилось сталкиваться с CSS переносом текста внутри блоков кода. Иногда высота блока текста выше, чем контейнера. Иногда проблемы возникали из-за длинных URL-адресов :

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

Свойства

Давайте бегло рассмотрим основные свойства.

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

В первом примере показано поведение по умолчанию для таких случаев:

Свойство word-break предназначено только для требующих определенного поведения языков ( китайского, японского и корейского ).

Я обычно использовал его для CSS переноса длинных слов, но, если речь не идет о не выше перечисленных языках, то лучше использовать свойство overflow-wrap, о котором я только что рассказал.

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

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

Тег ­ задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.

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

При CSS переносе текста в блоке по умолчанию пустые пространства объединяются и строки разрываются, чтобы соответствовать размерам контейнера. Это показано в первом примере, где в текст добавлены дополнительные пробелы, но при отображении они не выводятся.

Значение nowrap ( пример 2 ) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.

pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.

Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.

Значение pre-line объединяет пробелы ( за исключением символов перехода на новую строку ) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.

Блоки кода

По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.

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

Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.

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

Многоточия, которые имеют значение

Вот пример его применения:

Супер специфические расположения разрывов

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

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

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

Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.

Заключение

Задать правильное сочетание свойств для решения проблемы переноса может оказаться непростой задачей. Но попрактиковавшись и проанализировав свои ошибки, вы сможете найти верное решение:

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

Источник

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 задает отступ, применяемый к строкам встроенного содержимого в блоке. Отступ обрабатывается как поле, примененное к начальному краю линейного блока.
Если в первой строке блочного элемента присутствует изображение, то оно сдвинется вместе с остальным текстом.

Источник