Html мягкий перенос: Мягкий перенос в HTML (­ | ­ | u+00ad)

Содержание

Как скрыть мягкий дефис (­) в HTML / CSS



Я пытаюсь обернуть адрес email в слово внутри div, где в противном случае он будет переполнен, потому что он слишком длинный для ширины div.

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

Ни одно из приведенных ниже решений не делает именно то, что я хочу:

  1. CSS

    "word-wrap: break-word".
    

    В зависимости от ширины div это нарушает адрес email в неудобных местах.

    информация@longemailaddress.co.u

    к

  2. Используйте мягкий дефис внутри HTML:

    ­
    

    Это действительно хорошо поддерживается, но делает видимым дефис на странице, заставляя пользователя поверить, что адрес email имеет там дефис:

    [email protected]

    emailaddress.

    co.uk

  3. Используйте тонкое пространство или пространство нулевой ширины в адресе email:

      (thinspace)
    ​ (zero-width space)
    

    Оба они вставляют дополнительные символы (облом, если пользователь копирует-вставляет)

  4. Переносы ...

    <br />
    

    ... отсутствуют, потому что в большинстве случаев div достаточно велик, чтобы содержать адрес email в одной строке.

Я думаю, что надеюсь на какой-то гениальный способ сделать это в HTML/CSS,, возможно, используя псевдоэлементы (например,: before / :after), или используя мягкий дефис, но каким-то умным образом скрывая его с CSS.

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

Ответы на открытке, пожалуйста. (Или, в идеале, здесь...)

html css word-wrap hyphenation soft-hyphen
Поделиться Источник hazymat     21 августа 2012 в 13:26

3 ответа


  • Используйте мягкий дефис в C#

    Я хотел бы вставить мягкий дефис между каждой буквой в слове, используя C#., например, вот какой-то текст: Thisisatest => T-h-i-s-i-s-a-t-e-s-t - - это мягкий дефис. Как я могу это сделать в C#? я собираюсь использовать его на веб-сайте. Примечание: Я нахожусь на .NET 2.0.

  • мягкий символ дефиса не работает в IE8

    Мягкий дефис ( &shy; ) не работает в IE8. Я использую его, чтобы разбить длинные слова в div на несколько строк. Он работает в IE7, IE9 и других браузерах, есть ли какое-нибудь средство от этого? попробуйте jsFiddle.net пример: http://jsfiddle.net/puv75 /



6

Вы можете обрезать текст и использовать всплывающую подсказку

   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;

Что я делаю, так это при наведении указателя мыши показываю полный текст в виде всплывающей подсказки или использую атрибут

title для всплывающей подсказки.

<p title="[email protected]">...</p>

Поделиться Robin Maben     21 августа 2012 в 13:39



4

Может быть, вы можете попробовать <wbr> вместо <br>
К сожалению, это не сработает в IE.

Поделиться Simon Arnold     21 августа 2012 в 13:42



1

word-wrap:break-word зависит от ширины контейнера, в котором вы хотите разбить слово. Он не сломает его там, где вы решите. К сожалению, вам не повезло, если вы не хотите уменьшить ширину div так, чтобы он ломался там, где вы хотите.

Другие решения, как вы обнаружили, неадекватны вашим потребностям. Кроме того, использование "jQuery hyphenation library", вероятно, не решит вашу проблему, потому что это будет просто инъекция символов, разрывов строк и так далее, как вы пытались.

В конечном итоге вы сталкиваетесь с той же проблемой.

Я не имею в виду ничего обидного, но, может быть, было бы хорошо переосмыслить дизайн, а не работать вокруг дизайна? Ответ Робина-достойная альтернатива, хотя вы не сможете выбрать адрес email без javascript.

Поделиться Brendan     21 августа 2012 в 13:43


  • Как вставить мягкий перенос

    Я хотел бы вставить мягкий дефис между каждой буквой в слове, используя powershell. например вот какой текст: Thisisatest => T-h-i-s-i-s-a-t-e-s-t - -это мягкий дефис. Как я могу сделать это в powershell?

  • mod_rewrite: проверьте, содержит ли запрос мягкий дефис, и удалите его

    В моих журналах http я вижу: GET /category/f%C2%ADile-to-download/ HTTP/1.1 301 вместо GET /category/file-to-download/ HTTP/1.1 200 Я обнаружил, что %C2%AD-это мягкий дефис (невидимый символ). Мне нужно проверить, содержит ли запрос к Apache мягкий гипен, и если да, то удалить его.

    Есть...


Похожие вопросы:


Мягкий дефис в HTML (<wbr> против &shy;)

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


HTML: мягкий дефис (&shy;) без тире?

У меня есть небольшая проблема с макетом: на веб-сайте клиентов мы показываем контактную информацию людей в маленькой коробке. Ширина этой коробки ограничена. Как это бывает, есть люди с очень...


&shy; (мягкий дефис) и хром и Safari

У меня есть сайт, где я бы предпочел использовать &shy ; (мягкий дефис), чтобы разбивать слова так, как я хочу. Нажмите здесь для получения скриншота из Chrome Проблемные компьютеры работают под...


Используйте мягкий дефис в C#

Я хотел бы вставить мягкий дефис между каждой буквой в слове, используя C#.

, например, вот какой-то текст: Thisisatest => T-h-i-s-i-s-a-t-e-s-t - - это мягкий дефис. Как я могу это сделать в C#?...


мягкий символ дефиса не работает в IE8

Мягкий дефис ( &shy; ) не работает в IE8. Я использую его, чтобы разбить длинные слова в div на несколько строк. Он работает в IE7, IE9 и других браузерах, есть ли какое-нибудь средство от...


Как вставить мягкий перенос

Я хотел бы вставить мягкий дефис между каждой буквой в слове, используя powershell. например вот какой текст: Thisisatest => T-h-i-s-i-s-a-t-e-s-t - -это мягкий дефис. Как я могу сделать это в...


mod_rewrite: проверьте, содержит ли запрос мягкий дефис, и удалите его

В моих журналах http я вижу: GET /category/f%C2%ADile-to-download/ HTTP/1.1 301 вместо GET /category/file-to-download/ HTTP/1.1 200 Я обнаружил, что %C2%AD-это мягкий дефис (невидимый символ). Мне...


Удалить объект &shy; (мягкий дефис) из элемента

Я пытаюсь удалить все &shy; сущностей (мягкие дефисы) из моего элемента, Я пытался сделать это с помощью jquery.

Когда я извлекаю текст из элемента html, содержащего сущность, мне кажется, что я...


Дополнительный дефис в конце слова, если &shy; используется в середине слова, а родительский div узкий

Когда я использую мягкий дефис в середине такого слова, как это: <div> <span style=font-size: 2em> <a href=/Page.aspx?pageID=23>SPECIAL&shy;BEST&Auml;LLNING</a>...


Сочетание клавиш для вставки текста (мягкий дефис) с CKEditor

Как я могу сказать CKEditor вставить мягкий дефис ( &shy; ) с определенным сочетанием клавиш, например Ctrl + - (дефис), как в Word? Я знаю, что могу набрать Alt + 0173 , но моему клиенту это не...

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

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

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

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

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

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

Пример 1. Тег

Переносы

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

производительницы.

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

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

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

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

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

Переносы

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

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

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

Свойство word-break

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

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

Переносы

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

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

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

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

Свойство hyphens

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

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

Переносы

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

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

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

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

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

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

Переносы

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

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

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

Включаем перенос для слов, которые не влезают

Допустим, у меня есть блок, шириной 100 пикселей и мне в него нужно написать какой-то текст. В тексте попадается слово «самораспаковывающийся «. Таким бывает архив, например) Но не суть. Слово очень длинное, оно просто не влезет в контейнер по ширине. Давайте его напишем в такой узкий блок (100 пикселей). Что будет?

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

Word-wrap: break-word;

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

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

В каких случаях использовать word-wrap

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

Итак, в этой статье мы узнали, как делать перенос слов в css. На этом у меня сегодня все. До встречи.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
 имитирует работу 
Но в отличие от него не меняет шрифт на моноширинный.

Краткая информация

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. {1,4}
# Повторять один или больше раз через запятую. #
×

Значения

normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление
переносит текст на новую строку. pre Текст показывается с учётом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесён на следующую строку.

Действие значений на текст представлено в табл. 1.

Пример

white-space

Пример

Великая теорема Ферма
X n + Y n = Z n
где n - целое число > 2

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

Рис. 1. Применение свойства white-space

Объектная модель

Объект .style.whiteSpace

Примечание

Браузер Internet Explorer до версии 7. 0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведёт себя как pre-line .

Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

В Firefox для значения normal , nowrap , и pre воспринимаются как pre-wrap .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.
×

Краткая информация

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
 пользователем. Таким образом, white-space
 имитирует
 работу тега 
Но в отличие от него не меняет шрифт
 на моноширинный.

Синтаксис

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Значения

normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

Действие значений на текст представлено в табл. 1.

HTML5 CSS2.1 IE Cr Op Sa Fx

white-space

Пример

Великая теорема Ферма
X n + Y n = Z n
где n - целое число > 2

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

Рис. 1. Применение свойства white-space

Объектная модель

document.getElementById("elementID ").style.whiteSpace

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для

Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .

hyphens - CSS | MDN

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

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang.

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


hyphens: none;
hyphens: manual;
hyphens: auto;


hyphens: inherit;
hyphens: initial;
hyphens: unset;

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

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

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута  lang, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

U+2010 (HYPHEN)
«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.
U+00AD (SHY)
Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте &shy; для вставки мягкого дефиса.

Когда HTML элемент <wbr> приводит к разрыву строки, дефис не добавляется.

Указание переносов текста

В этом примере используются три класса, по одному для каждой возможной конфигурации свойства hyphens.

HTML
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en">An extreme&shy;ly long English word</dd>
  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
  <dd lang="en">An extreme&shy;ly long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en">An extreme&shy;ly long English word</dd>
</dl>
CSS
dd {
  width: 55px;
  border: 1px solid black;
 }
dd. none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
Результат

BCD tables only load in the browser

Переносы слов. Переносы слов в HTML Перенос на другую строку css

Автоматический топорный перенос слов (без добавление дефисов).

Интересуемые значения свойства:

  • break-all
    Автоматический перенос всех слов, текст выглядик как выровненный по ширине.
  • break-word (используется на этом сайте в заголовках)
    Перенос отдельных слов, которые не поместилось в заданную ширину блока.

Светлое будущее. СSS cвойство hyphens

Правила переносов определяются словарём встроенным в браузер. Свойство работает при наличии атрибута lang с кодом языка на уровне всего документа или отдельных его частей.

Интересуемые значения:

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

Программиирование - процесс и искусство создания компьютерных программ с помощью языков програм&shyмирования.

p { hyphens: auto; }

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

Существует обратная задача - запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел &nbsp

Также у CSS свойства hyphens существует значеие none , когда слова не переносятся, даже при наличии в тексте мягких переносов.

Всем привет и приступим. Допустим у нас есть следующий текст:

Правительство Объединенных Арабских Эмиратов и администрация концентрируют в этом городе все самые новые технологии, основанные на последних достижениях науки и техники, пытаясь превратить его город будущего, словно сошедший с экрана какого-нибудь научно-фантастического фильма. К этим технологиям можно отнести роботов-полицейских, автомобили-роботы и транспортную систему Hyperloop, а в недалеком будущем в Дубайе начнет функционировать служба автоматических летающих такси. И в рамках подготовки к этому событию электрический двухместный летательный аппарат Volocopter с 18 роторами, который и будет использоваться в качестве такси, совершил первый полет в автоматическом режиме, пишут...

здесь у нас указан некий текст с которым мы сейчас начнем работать.

И первое свойство которое мы с вами рассмотрим называется word-break

word-break: normal | keep-all | break-all

Нас в основном интересуют два значения данного свойства normal - дефолтное значение и break-all с помощью которого мы устанавливаем что перенос слов осуществляется посимвольно. Что касается keep-all, то данное значение служит для переноса слов на китайском, японском и корейском языках.

P{ word-break: break-all;. }

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

К счастью есть аналогичное свойство которое переносит только не влезающие слова по символам. Называется оно overflow-wrap:

P{ overflow-wrap: break-word; }

и после применения значения break-word, весь наш текст переносится по словам, а слова которые не влезают в заданную ширину переносятся посимвольно. Можно сказать задача выполнена! Помимо значения break-word данное свойство принимает:

overflow-wrap: normal | break-word | inherit;

Теперь давайте перейдем к более продвинутому свойству css для переноса слов в тексте.

Рассмотрим свойство white-space c помощью которого мы можем имитировать работу тега pre не меняя сам текст на моноширный.

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

По сути с помощью данного свойства мы работает только с пробелами в тексте. К примеру если мы применим следующий стиль к нашему тексту:

White-space: nowrap;

все переносы строк у нас будут проигнорированы и наш текст отобразиться в виде одной строки.

White-space: pre;

В случае значения pre все переносы строк будут аналогичны переносам в исходном коде. Причем если текст не будет помещаться в заданную ширину, то он переносится не будет. Если мы хотим чтобы он переносился, то нам нужно указать значение pre-line.

Если же мы хотим чтобы у нас учитывались не только переносы строк исходного кода, но и пробелы между словами, тогда нужно указать:

White-space: pre-wrap;

Вот в принципе и все что я хотел вам рассказать про переносы слов средствами css. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

Ну а я же с вами прощаюсь. Желаю успехов и удачи! Пока!

html - Web - таинственные пробелы

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
   }
  </style>
 </head>
 <body>
  <p>Одиннадцатиклас<wbr>сница Анжелика 
  после окончания школы выбрала профессию 
  дело<wbr>произ<wbr>водитель<wbr>ницы. </p>
 </body>
</html>

Применение <wbr> имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол &shy;. Он выполняет ту же роль, что и тег <wbr> — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
   }
  </style>
 </head>
 <body>
  <p>Один&shy;надцатиклас&shy;сница Анжелика 
  после окончания школы выбрала профессию 
  дело&shy;произ&shy;водитель&shy;ницы. </p>
 </body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Переносы</title>
  <style>
   .word { 
    width: 160px; 
    background: #f0f0f0;
    border: 1px solid #333;
    padding: 10px;
    font-size: 18px;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
   }
  </style>
 </head>
 <body>
  <p>Одиннадцатиклассница Анжелика 
  после окончания школы выбрала профессию 
  делопроизводительницы. </p>
 </body>
</html>

Как поставить или убрать перенос слов в Word

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

Зачем в MS Word присутствует функция переноса слов

Частично ответ на этот вопрос уже дан – расстановка переносов в Word требуется для получения возможности оформить текст на странице так, чтобы он воспринимался естественно. Делается это посредством расстановки между словами равномерных интервалов. Вторая задача, выполняемая функцией – экономия места на листе, что важно, если документ многостраничный и планируется его вывод на печать.

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

Установка в Word автоматического переноса

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

Рассмотрим, как в Word установить автоматический перенос, который будет действовать в отношении всего текста или его выделенной части:

  • в версиях, начиная с 2007, необходимо начать с вкладки «Разметка страницы», находящейся в главной панели, кликнуть на кнопке «Расстановка переносов» и поставить галочку возле опции «Авто»;
  • в Word 2003 порядок несколько иной: выбираем вкладку «Сервис», в появившемся меню кликаем на опции «Язык» и выбираем подпункт «Расстановка переносов». В новом окне требуется поставить галочку возле фразы «Автоматическая расстановка переносов».

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

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

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

Рассмотрим, как включить ручной перенос в Word 2007-2016:

  • кликаем на вкладке «Параметры страницы»;
  • щёлкаем мышкой на опции «Расстановка переносов»;
  • откроется очередное окно, в котором ставим галочку напротив слова «Ручная»;
  • осталось настроить знак переноса. Вам будет предложен вариант переноса слова, если он будет для вас удовлетворительным, жмите «Да». В противном случае программа предложит вам другой вариант переноса, сместившись на слог вперёд, а если это был последний – на следующее слово.

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

А теперь опишем, как включить/сделать перенос слов в Word 2003.

Жмём на вкладку «Сервис», выбираем подпункт «Язык» с треугольником, в дополнительном меню жмём подпункт «Расстановка переносов». Мы уже так делали, когда включали автоматический режим расстановки слов. Теперь нам нужно кликнуть по кнопке «Принудительно». Откроется такое же окно с настройками переноса, как описано выше – вам нужно выбрать, как разделять слова по слогам.

Настройка параметров переноса, корректировка ширины зоны

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

Изменение числа последовательных переносов

Это первый способ. Для его реализации выбираем вкладку «Разметка страницы» на главной панели, кликаем на подпункте «Расстановка переносов», в котором нас интересует кнопка «Параметры расстановки переносов». В настроечном окне необходимо в параметре «Максимальное количество последовательных переносов» вместо значения по умолчанию («нет») ввести число, которое вас устроит.

Ширина зоны переноса

Ещё один важный параметр, о значении которого знают очень немногие пользователи текстового редактора от Microsoft. Вы можете «поиграть» этой характеристикой, чтобы понять, как она работает. Одна из стратегий – уменьшение ширины переноса. Для этого зайдите в «Расстановку переносов», кликните на кнопку «Параметры» и в параметре «Ширина зоны» установите небольшое значение, например, 0.25. После подтверждения посмотрите, что получилось – число переносов увеличится. Напротив, увеличение параметра «Ширина зоны», относящегося ВК правому краю строчки, приведёт к уменьшению количества переносов.

Неразрывный дефис

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

Что нужно сделать, чтобы внести необходимые поправки? Использовать неразрывный дефис вместо обычного. Он вставляется комбинацией Shift + Ctrl + «-». Его можно применять и к цифрам, и к буквам.ажав на кнопку «Отображение всех знаков» (она находится на вкладке «Главная»), вы увидите, что короткий дефис оказался замещённым длинным тире. Этот метод особенно хорош для таблиц, где из-за дефицита пространства очень часто встречается специфический, неправильный перенос слов. Точно так же можно поступать и с пробелами, используя вышеописанную комбинацию с пробелом вместо дефиса.

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

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

Вставка мягкого переноса осуществляется нажатием комбинации Ctrl + «-». Нужно только поставить курсор в месте желаемого переноса и переключить клавиатуру на латиницу комбинацией Shift + Alt.

СОВЕТ. Если вы используете мягкий перенос, то при любом изменении размера шрифта, неважно, увеличение это или уменьшение (но не при изменении стиля!), мягкий перенос пропадёт, и вам придётся расставлять переносы в Word ещё раз.

Способы убрать перенос слов в редакторе Word

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

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

Рассмотрим, как отключить перенос слов в Word 2007-2016. Процедура отмены различна для разных типов переноса, поэтому вначале нужно определить, имеем мы дело с автоматическим переносом или ручным. Делается это очень просто: пробуем выделить дефис, который является переносом, то есть разделяет слово в строке. Если дефис выделился (о чём будет свидетельствовать инверсия цветов), то это ручной перенос, в противном случае мы имеем дело с автоматическим режимом расстановки.

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

С ручным переносом придётся повозиться больше. Схема следующая:

Убрать перенос текста в Word 2003 столь же просто. Определяем тип переноса описанным выше методом, он справедлив и для старой версии редактора.

Если в тексте задействован автоматический перенос, идём во вкладку «Сервис» на главной панели редактора, выбираем пункт меню «Язык», подпункт «Расстановка переносов», снимаем галочку напротив фразы «Автоматическая расстановка переносов», подтверждаем операцию.

Убрать переносы в Word 2003, выполненные в ручном режиме, можно по такой схеме:

  • кликаем на вкладке «Правка» в верхней панели;
  • выбираем пункт подменю «Заменить»;
  • откроется стандартная панель «Найти и заменить», кликаем на вкладке «Заменить»;
  • чтобы добраться до расширенного выбора параметров, кликаем на кнопке «Больше», а затем – на «Специальный»;
  • выбираем в ниспадающем меню опцию «Мягкий перенос» и видим, что в строке найти появится спецсимвол;
  • строка «Заменить на» должна быть пустой, это важно;
  • щёлкаем на кнопке «Заменить всё»;
  • повторяем процедуру, но на этот раз выбираем пункт «Неразрывный дефис».

То есть здесь немного другой способ вызова панели «Найти и заменить», во всём остальном инструкции идентичны.

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

Иллюстрированный самоучитель по Adobe PageMaker 7 › Форматирование абзацев › Перенос слов [страница - 66] | Самоучители по графическим программам

Перенос слов

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

Диалоговое окно Hyphenation

Для управления переносами слов в PageMaker существует диалоговое окно Hyphenation (Перенос), приведенное на рис. 5.10. Оно открывается одноименной командой меню Type (Текст). Ниже приведен список элементов управления этого окна.


Рис. 5.10. Диалоговое окно Hyphenation

  • Hyphenation: On/Off (Перенос: Да/Нет). С помощью этого переключателя включается и выключается режим разрешения переноса. Если переключатель поставлен в положение On (Да), PageMaker может переносить слова. Если же этот переключатель находится в положении Off (Нет), переноса слов не происходит, причем запрет распространяется как на автоматические переносы, выполняемые с помощью словаря или соответствующего алгоритма, так и на мягкие (дискреционные) переносы, проставляемые вручную.

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

  • Manual only (Ручной). В этом режиме PageMaker выполняет только ручные (дискреционные) переносы, автоматический перенос при этом не осуществляется.
  • Manual plus dictionary (Ручной плюс словарь). Кроме ручных переносов, происходят и автоматические. Точки переноса в этом случае PageMaker выбирает в соответствии со встроенным словарем переносов.
  • Manual plus algorithm (Ручной плюс алгоритм). Если поставить этот режим, то в дополнение к дискреционным переносам и переносам по словарю PageMaker будет пытаться применить поиск допустимого переноса к тем словам, которых нет в словаре.
  • Limit consecutive hyphens to (Подряд не более). Если в текстовом блоке имеется несколько переносов подряд, один под другим, это выглядит некрасиво. Можно задать число подряд идущих строк, заканчивающихся знаком переноса. Это может быть число от 1 до 255. Если проблема "лестницы" (так называются переносы в смежных строках, действительно похожие на вертикальные пожарные лестницы) для вас неважна, можно поставить значение No limit (Без ограничений).
  • Hyphenation zone (Зона переноса). Правильнее, наверное, назвать этот атрибут "зоной запрета переноса". Так называется вертикальная полоса, примыкающая к правой границе колонки. Если слово находится левее зоны переноса, оно не переносится. Если часть слова попадает в эту зону, происходит перенос. Если слово целиком находится в зоне переноса, оно полностью переходит на следующую строку. Этот атрибут работает только в абзацах с рваным краем, в случае выключки по формату зона переноса не действует. На рис. 5.11 представлено влияние зоны переноса на длину строки. Все остальные атрибуты в этом абзаце одинаковые. В первом фрагменте установлена зона переноса 1 мм, во втором – 7 мм (возможна ширина зоны переноса от 0 до 12.7 мм с шагом 0.1 мм). Как видите, край в первом случае более ровный, чем во втором. Если задать зону переноса слишком узкой, PageMaker придется часто переносить слова, в этом случае на соседних строчках образуется "лестница".


Рис. 5.11. Влияние зоны переноса на длину строк и вид рваного края текста

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

Свойство режима записи CSS


Пример

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

p.test1 {
режим записи: горизонтальный-tb;
}

p. test2 {
режим письма: вертикальный-rl;
}

span.test2 {
режим записи: вертикальный-rl;
}

Попробуй сам "

Определение и использование

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

Значение по умолчанию: горизонтальный-tb
Унаследовано: да
Анимируемое: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.writingMode = "vertical-rl"

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

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Объект
режим записи 48,0 12,0 41,0 11,0 35,0

Синтаксис CSS

режим письма: горизонтальный-тб | вертикальный-рл | вертикальный-л;

Стоимость недвижимости

Значение Описание
горизонтальный-tb Позвольте контенту течь горизонтально слева направо, вертикально от сверху вниз
вертикальный-rl Позвольте контенту течь вертикально сверху вниз, горизонтально от справа налево
вертикальный-lr Позвольте контенту течь вертикально сверху вниз, горизонтально от слева направо

связанные страницы

Учебное пособие по CSS: текстовые эффекты CSS



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

По умолчанию браузеры не переносят текст по границам слога. Текст переносится только по границам слова.

На этой карточке объясняются некоторые варианты включения в браузеры длинного слова, например "Donaudampfschifffahrt" .

Современные браузеры могут использовать собственный дефис с помощью свойства CSS дефис :

 

Копировать

дефис: авто

Также есть перенос: нет (отключение переносов даже для объектов & shy; ) и переносов: ручной (перенос переносов только для & shy; ).
Эта функция была недавно интегрирована в Chrome 88, в то время как все остальные основные браузеры уже давно поддерживают ее.

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

До тех пор, пока не будут выведены из употребления старые версии Chrome, вы можете использовать полифил на основе MIT под названием Hyphenopoly. Он будет применять расстановку переносов на основе JS, если тест функций показывает, что расстановка переносов на основе CSS не поддерживается для данной локали. Обратите внимание, что Hyphenopoly в первую очередь является модулем NodeJS и нацелен на расстановку переносов на стороне сервера, но его также можно настроить для клиентской стороны.

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

HTML-объект для мягкого переноса: & shy; .Используйте его, чтобы обозначить возможности разделения длинным словом, например:

 

Копия

Do & shy; nau & shy; dampf & shy; schiff & shy; fahrt

Предупреждение: неожиданное поведение при копировании и вставке

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

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

Автоматическая вставка мягких переносов

Вы можете использовать библиотеки JavaScript, такие как hypher (включая шаблоны LGPL!), Для автоматической вставки мягких переносов в текст узла DOM.

Обратите внимание, что для хорошей интеграции такой библиотеки требуется дополнительная работа с вашей стороны:

  • Загрузка правильных шаблонов расстановки переносов для используемого языка
  • JavaScript для применения функции библиотеки к узлам DOM, которые вы хотите перенести через дефис
  • Вручную добавление исключений к словам, которые не хотите переносить через дефис.Например. Торговые наименования, такие как makandra , не должны переноситься через дефис.

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

 

Копия

Do nau dampf schiff fahrt

Подобно мягкому дефису тег невидим. В отличие от мягкого переноса, браузер , а не будет вставлять символ дефиса при переносе на .Это делает его хорошим выбором для обертывания неестественного языка, такого как URL-адреса или исходный код.

В отличие от мягких переносов тег не будет помещен в буфер обмена при копировании текста.

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

 

Копировать

word-wrap: break-word

Несколько вещей:

  • word-wrap был переименован в overflow-wrap в CSS3. Для поддержки Internet Explorer или Edge используйте устаревшее имя с переносом слов .
  • Не путайте это с CSS-свойством word-break , которое звучит похоже, но фактически управляет разрывом пробелов. word-break: break-all прерывается после последнего символа, который умещается в строке, и это редко то, что вам нужно.
  • Мы рекомендуем использовать word-wrap: break-word , когда (неконтролируемые) тексты могут нарушить ваш макет, например в списке URL-адресов.
  • Вот пример: https://jsfiddle.net/51dyzyxm/
Защитите свое приложение Rails от нарушений безопасности

Получает ли ваша версия Ruby on Rails обновления безопасности?
Rails LTS предоставляет исправления безопасности для старых версий Ruby on Rails (3.2 и 2.3).

overflow-wrap: где угодно - Chrome Platform Status

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

Мотивация

Эта функция решает давнюю проблему веб-совместимости, связанную с функцией «разрыв слова: разрыв слова». Спецификация CSS Text 3 по-прежнему позволяет использовать значение break-word для обеспечения совместимости (Safari и Chrome поддерживают его), но оно помечено как устаревшее; вот почему Firefox не реализует его. Функция 'word-break: break-word' обеспечивает поведение, которое действительно ценят веб-авторы, которое состоит в том, что возможности нарушения ограничиваются размером минимального содержимого.Было изучено несколько подходов, но все они приводят к серьезным проблемам веб-совместимости, поэтому рабочая группа CSS решила, что новое значение CSS должно быть лучшим решением.

Демо

Документация

Спецификация

Черновик редакции

Статус в Chromium

Компоненты Blink: Blink> Layout

Включено по умолчанию (ошибка отслеживания) в:

  • Chrome для настольных ПК 80
  • Chrome для Android, выпуск 80
  • Версия Android WebView 80

Консенсус и стандартизация

После того, как функция будет добавлена ​​в Chrome, не гарантируется, что указанные здесь значения будут актуальными.


  • Fire Fox: Отправлено / Доставка
  • Край: Нет сигнала
  • Сафари: Нет сигнала
  • Веб-разработчики: положительно

Владелец

Последнее обновление 10.03.2021

Hard vs. Soft Line Wrap

Пока редактирую текст, использую Vim.Мои текстовые документы были либо Markdown, reStructuredText, либо LaTeX. Все они в некотором смысле всего лишь исходный код, формат вывода HTML или PDF в браузере. Одиночные разрывы строк не имеют значения в любом формате, для разделения абзацев требуется пустая строка между ними. Таким образом, можно произвольно вставлять разрывы строк в абзаце, не имея смысла семантически.

Давно использую hard line wrap . Это означает, что я позволяю своему редактору вставлять разрыв строки после 79 символов в строке, ограничивая длину строки до 80 символов (включая разрыв строки \ n ). Альтернативой является мягкий перенос строк , когда редактор не вставляет разрывы строк в исходный код, а просто виртуально переносит строки для отображения так, чтобы они подходили. Последний подход используется в текстовых процессорах, таких как Microsoft Word или LibreOffice Writer. Также он используется практически во всех веб-формах.

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

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

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

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

Размеры окон

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

Текст содержит около 120 символов в строке, что трудно читать, поскольку все чаще начинает теряться текущая строка. Если вы использовали жесткую пленку, то все равно выглядит аккуратно:

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

Но когда размер окна недостаточен для фиксированной ширины текста, он начинает выглядеть ужасно некрасиво:

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

Если бы мы использовали мягкую ленту, она все равно выглядела бы так же:

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

Это похоже на рассуждение для табуляции против пробелов . Раньше я был в Team Tabs и утверждал, что теперь каждый может просто регулировать ширину отображаемых вкладок, и, следовательно, у всех это есть так, как они хотят. Но сейчас я в Team Spaces, потому что хочу, чтобы это выглядело одинаково на всех платформах. Мне не нужно ничего настраивать. С вкладками мне нужно было бы сообщить моему редактору, git, GitHub и любому другому инструменту ширину моих вкладок.

Монтаж

При редактировании текста в любом обычном редакторе мягкий перенос строк является естественным. Но в Vim клавиши со стрелками вверх и вниз (или j и k ) перемещают вниз физическую строку в файле, а не виртуальную строку на дисплее. Это можно исправить, используя взамен gj и gk . Также вы можете прокручивать только так, чтобы вся физическая линия умещалась на экране. Если у меня длинные абзацы, я могу прокручивать только каждый абзац.

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

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

По сути, некоторые особенности Vim упрощают использование жесткой упаковки, что усложняет выполнение всего остального.

Принимая различия

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

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

Можно просто использовать git diff --color-words и увидеть различия на уровне слов. Если сделать это с жестким переносом лески, это не даст ощутимых результатов. Поэтому, хотя различия часто называют причиной использования жесткого переноса строк, это не имеет особого смысла.

Взаимодействие

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

Markdown со вкусом GitHub предполагает, что даже отдельные разрывы строк имеют смысл, и сохраняет их в выводе. Тогда мой жестко обернутый текст выглядит на сайте очень странно. Либо он недостаточно широкий (на компьютере), либо выглядит сдвинутым (на мобильном устройстве).

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

Заключение

Хотя я уже много лет использую жесткую пленку для всех своих документов, я постараюсь перейти на мягкую пленку. Для программирования исходного кода я все еще буду использовать жесткий перенос строк, но новые сообщения в блогах, заметки и проза будут бесплатными.

Разрыв слов в Интернете на языках Восточной Азии · Коды и примечания

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

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

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

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

Например, вот требования к макету японского текста.

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

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

Свойство CSS line-break

В частности, как перенос текста взаимодействует с пунктуацией и символами.

перенос строки: авто | свободный | нормальный | строгий;

Свойство CSS word-break

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

> разрыв слова: нормальный;

применяются обычные правила

> word-break: break-all;

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

Рекомендуется для текстов CJK с небольшим количеством текстов, отличных от CJK.

> разрыв слова: сохранить все;

Разрывы между буквами не допускаются. Также там, где они обычно явно разрешены.

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

Рекомендуется для смешанных текстов на латинице и CJK.

Свойство CSS «overflow-wrap»

> overflow-wrap: normal;

Линии могут разрываться только в разрешенных точках разрыва. Однако ограничения, введенные word-break: keep-all , могут быть ослаблены, чтобы соответствовать word-break: normal , если в строке нет приемлемых точек разрыва.

> переполнение-перенос: слово-прерывание;

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

Kinsoku шори

Правила разрыва строк в японском языке определены JIS X 4051, японским промышленным стандартом.[1] В нем описаны правила переноса слов и правила обработки для документов на японском языке. эти правила называются Кинсоку Сори (禁 則 処理, буквально процесс запрещающих правил).

Примечания

Браузер поддерживает только частичную поддержку word-break: break-all; В корейском языке используются пробелы между словами.

Ресурсы

Дерзкий огненный шар: BBEdit Soft Wrap Toggling

Понедельник, 4 октября 2004 года

На языке BBEdit мягкая упаковка - это то, что происходит, когда длинные строки текст автоматически переносится на следующую строку.Если мягкое обертывание выключено, длинные строки прокручиваются с правой стороны окна вместо упаковка.

Есть два способа включить мягкое обертывание в переднем окне с помощью обычный пользовательский интерфейс - флажок в диалоговом окне Правка → Параметры текста и меню в раскрывающемся меню «Параметры текста» в строке состояния. Один общий вопрос в том, есть ли способ переключить мягкую пленку с помощью клавиатуры ярлык.

До BBEdit 8 ответ заключался в том, чтобы использовать AppleScript, а затем назначить сочетание клавиш для скрипта.Вот сценарий, который просто переключает включение и выключение мягкой пленки в переднем окне:

  сказать приложение "BBEdit"
    указать окну 1, чтобы текст с мягким переносом не переносился с мягким переносом текста
конец сказать
  

BBEdit 8 теперь предоставляет встроенный способ назначения сочетаний клавиш для Пункты меню строки состояния. Откройте диалоговое окно BBEdit → Set Menu Keys и рядом с внизу списка находится запись для строки состояния, содержащая элементы из раскрывающиеся меню «Параметры текста», «Маркеры» и «Параметры файла». Это - сейчас самый простой способ добавить сочетания клавиш для часто используемой строки состояния Предметы.

Однако я все еще использую AppleScript для переключения мягкого переноса через клавиатура. Причина в том, что в зависимости от контекста я использую три различные состояния soft-wrap:

  • выкл
  • с фиксированной шириной
  • на ширину окна

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

Еще одна новая функция BBEdit 8, связанная с упаковкой, - это руководство по страницам. тонкий светло-серый вертикальный индикатор с указанной шириной символа. В Page Guide заменяет старый Philip Bar BBEdit. Вы можете указать ширина символа для руководства по страницам в отображении состояния текста BBEdit панель настроек; значение по умолчанию - 80.

Руководство по страницам не обязательно должно быть светло-серым; это немного темнее оттенок любого цвета, который вы указали в качестве фона текстового окна цвет. Поэтому, если фон вашего текстового окна бледно-зеленый, Руководство по страницам будет чуть более темного оттенка зеленого.(Если цвет вашего фона черный, Руководство по страницам немного светлее .) Я использую светло-серый цвет фона - rgb (225, 225, 217) - так с руководством страницы отображается, это выглядит так:

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

  сказать приложение "BBEdit"
    сказать окно 1
        если нет (мягкий перенос текста), то
            установить для мягкого переноса текста значение true
            установить режим мягкого обтекания для руководства по страницам
            установить для показа справочника значение true
        иначе, если (режим мягкого переноса - это руководство по страницам), то
            установить режим мягкого переноса на ширину окна
            установить руководство по отображению страницы в значение false
        еще
            установить для мягкого переноса текста значение false
        конец, если
    конец сказать
конец сказать
  

Я назначил этому сценарию сочетание клавиш Ctrl-W (используя Палитра скриптов).По умолчанию мои новые документы BBEdit открываются программным обтекание отключено (как указано в настройках редактора по умолчанию панель). Поэтому, если я хочу включить мягкое обтекание, я нажимаю Ctrl-W, а затем Появится направляющая страницы, и текст будет перенесен на направляющую страницы. Если я ударил Снова Ctrl-W, руководство по страницам исчезает, а текст переносится на ширина окна. Еще раз, и я вернулся к тому, с чего начал, с упаковка отключена.

Упаковка

Упаковка

TeXlipse поддерживает три различных режима переноса строк:

  1. Режим мягкого обертывания
  2. Режим жесткого обертывания
  3. Твердая пленка на основе действия

Использование и конфигурация:

Меню рабочей области содержит переключатель для переноса текста.Переключатель кнопка видна, когда открыт хотя бы один .tex-файл. Обертывание установлено на и на из этого переключателя. Если переключатель кнопка нажата, то используется перенос слов. Отпускание переключателя отключает перенос слова.

Пользователь может настроить перенос строк в настройках Texlipse. страница. Страница содержит список переключателей, по которому пользователь может определить, является ли строка режим упаковки мягкая пленка или жесткая пленка. Пользователь также может определить максимальную строку width (ширина линии теперь работает только с жесткой пленкой).Ширина линии по умолчанию - 80 символы.

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

Режимов:

Режим мягкого обертывания

Мягкий перенос означает, что редактируемый файл не изменяется при переносе, т.е. нет линии разделители будут автоматически добавлены в документ. Линии отображаются только так, как если бы они были завернуты.С другой стороны, при жестком переносе при необходимости добавляются разделители строк, Таким образом, упаковка становится частью документа. ПРЕДУПРЕЖДЕНИЕ: Начиная с Eclipse 3.0, в реализации мягкого обтекания Eclipse есть ошибка, из-за которой позиции в вертикальном штрих (код, складывающий аннотации ошибок, маркеры положения) не синхронизирован с вид редактора (проблема чисто визуальная, складки работают корректно). Дополнительно мягкое обертывание довольно медленно. Из-за этих проблем пользователю рекомендуется действовать с осторожностью, если он намеревается используйте мягкую пленку.

Режим Hard wrap

В режиме Hard wrap TeXlipse проверяет длину строки после каждого набранного пробела. Если длина строки больше максимального значения, последний пробел позиция перед поиском максимума, и туда вставляется разделитель строк. Если здесь не является пробелом перед максимальным значением, тогда ищется первый после максимума и туда вставляется разделитель строк.

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

Обратите внимание, что пробелы из-за отступа не учитываются. Если предположить, что наши отступ должен составлять 15 символов, максимальная длина строки - 80, и мы пишем строку длиной 70 символов (не содержит пробелов), тогда общая длина строка будет 85.

Жесткая пленка на основе действия

Пользователь может выполнить функцию жесткого переноса в выбранную текстовую область.Чтобы использовать это функции, пользователь должен сначала выбрать область, а затем нажать Esc Q или выберите Latex> Correct Line Wrap . Пользователь также может выбрать текст, активировать контекстное меню (щелкните правой кнопкой мыши вид текстового редактора) и выберите пункт Correct Line Wrap из контекстного меню.

Примечание 1: строки комментариев игнорируются.

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

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *