Css перенос слов с дефисом: Как сделать перенос слов через дефис в тексте черес CSS? — Хабр Q&A

Leave a Comment / Css / By /

Передряги при переносах — CSS-LIVE

Перевод статьи Word Wrapping Woes  с сайта jonibologna.com, опубликовано на css-live.ru с разрешения автора — Джони Трайтел.

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

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

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

/me бьется об стол

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

Свойства

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

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

word-wrap/overflow-wrap

Свойство word-wrap принимает в виде значений два ключевых слова: normal (по умолчанию) и break-word. Это в дополнение к трём глобальным значениям inherit, initial и unset.

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

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

Второй пример на этом демо включает объявление overflow-wrap: break-word;, приказывающее браузеру разбить слово перед возможным переполнением своего контейнера.

Важно заметить: в текущем черновике спецификации CSS3 Text word-wrap было заменено на overflow-wrap, но значения остались прежними. И взгляните на текущую поддержку браузерами этого изменения.

word-break

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

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

hyphens

Свойство hyphens рассказывает браузеру, как расставлять дефис при переносе, и допускает следующие значения: none, manual и auto, которые в настоящий момент плохо поддерживаются браузерами, поэтому вам, видимо, придётся запустить FireFox.

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

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

Жёсткий перенос (-) прикажет слову разорваться в определённом месте при необходимости, но всё в любом случае будет отображаться на экране.

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

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

white-space

У каждого из нас есть любимые CSS-свойства, на которые можно положиться, словно на запасной выход с надписью «При аварии разбить стекло молотком», чтобы выбраться из запутанной ситуации; см. также overflow: hidden и display: none. Для меня таким свойством является white-space.

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

У этого свойства бывает пять значений: normal (по умолчанию), nowrap, pre, pre-wrap и pre-line.

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

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

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

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

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

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

На CSS—Tricks есть удобная табличка, которая поможет всё это резюмировать.

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

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

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

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

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

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

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

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

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

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

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

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

Эй, чем ты занимался на вы­ходных? Я рисовал по керамике, это выглядело натурально.

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

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

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

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

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

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

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

Перенос слов в заголовках статей/названиях разделов — Вопрос от Тимур Изотов

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16521)
  • Платные услуги (2132)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1433)
  • Редактор страниц (236)
  • Новости сайта (499)
  • Каталоги (808)
  • Блог (дневник) (112)
  • Объявления (295)
  • Фотоальбомы (433)
  • Видео (255)
  • Тесты (60)
  • Форум (578)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2455)

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

  • Работа с аккаунтом (5322)
  • Поиск по сайту (426)
  • Меню сайта (1765)
  • Домен для сайта (1533)
  • Дизайн сайта (13471)
  • Безопасность сайта (1483)
  • Доп. функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (433)
  • Почтовые формы (318)
  • Статистика сайта (198)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (644)
  • PHP и API на uCoz (235)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (429)
  • Софт для вебмастера (39)

…

html — Как добавить автоматический дефис в слово разрыва с помощью css

спросил

Изменено 5 лет, 8 месяцев назад

Просмотрено 4к раз

Мне нужно добавить автоматический дефис в слове разрыва с помощью css. Я использую ниже css для добавления дефиса, но он не работает

 ширина: 150 пикселей; граница: сплошная черная 1px;
-ms-слово-брейк:сломать-все;
слово-разрыв: разбить-все;
слово-разрыв:разрыв-слово;
-вебкит-дефис:авто;
-moz-дефис:авто;
дефис:авто;

Мне нужно добавить дефис для Mozilla Firefox 53. 0.3 и Google Chrome

  • html
  • css

2

Вы можете попробовать softhyphen ( ­ ). Который автоматически покажет дефисы, когда они вам понадобятся. Но недостатком является то, что вы должны добавить его в контент. Это лучше, чем заставить работать дефис:авто во всех браузерах

Пример: https://jsfiddle.net/karthick6891/bma7qr7v/

 
 Lorem ipsum dolor sit amet, consectetur adip­iscing elit. Suspendisse ullamcorper metus in lorem dapibus pellentesque. Mauris maximus, diam non euismod tristique, sem sem scelerisque risus, eget cursus dolor turpis eget massa. Morbi congue non velit vel congue. Suspendisse sit amet sapien a nisi tempus pellentesque. Integer eleifend justo dignissim, mollis neque quis, maximus lorem. Vestibulum ut purus sed neque venenatis ullamcorper. Приостановить потенциал. Aenean lobortis commodo sem id varius. Nulla facilisi. Nulla varius sagittis magna ac accumsan.  Nunc euismod aliquam erat, ut fringilla odio sodales vitae. Curabitur pellentesque erat ut risus aliquam, convallis vulputate ex vestibulum. Целое число и числовое выражение

Найдите слово «адиписцинг» в первом предложении

2

Как уже упоминалось в других ответах, Chrome не очень хорошо взаимодействует. CanIUse говорит, что работает только в Chrome под Mac OS и Android. Независимо от причины.

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

 .слова {
  ширина: 150 пикселей; граница: сплошная черная 1px;
  -webkit-дефисы: авто;
  -moz-дефис: авто;
  -ms-дефисы: авто;
  дефисы: авто;
} 
 
 
  В орбитальной механике переходная орбита Хомана - это орбитальный маневр. 
  используя два импульса двигателя, которые, согласно стандартным предположениям, перемещают
  космический корабль между двумя компланарными круговыми орбитами.

Попробуйте использовать дефис с авто

 -webkit-дефисы: авто;
-moz-дефис: авто;
-ms-дефисы: авто;
дефисы: авто;

пример можно найти здесь. Я думаю, что это не работает на Chrome

3

, возможно, вам следует изучить этот

PS: он не будет работать в Chrome в IE9 или ниже, работает в IE10 или выше.

 -вебкит-дефис: авто;
-moz-дефис: авто;
-ms-дефисы: авто;
дефисы: авто;

3

Более умный разрыв слов в CSS?

спросил

Изменено 5 месяцев назад

Просмотрено 31к раз

Если я просто добавлю word-break: break-all к элементу, я часто получаю это:

Привет, люди, я набираю сообщение
шалфей слишком длинный, чтобы поместиться!

Очевидно, это было бы намного лучше, как:

Здравствуйте, я набираю сообщение
, оно слишком длинное!

Но при этом если кто напишет:

БЛАААААААРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРРР GGGGGGHHHHHHHHH!!!!!!

Тогда я бы хотел, чтобы это было:

БЛАААААААРРРРРРРРРРРРРРРРРРРРРРР
РГГГГГГГХХХХХХХХ!!!!!!

Кажется, я не могу найти способ сделать это.

Обратите внимание, что ширина элемента не фиксирована и может меняться.

  • css
  • разрыв слова

1

Попробуйте word-break: break-word; он должен вести себя так, как вы ожидаете.

4

Во многих наших проектах мы обычно добавляем это при необходимости:

 .text-that-needs-wrapping {
    overflow-wrap: break-word;
    перенос слов: прерывание слова;
    -ms-word-break: сломать все;
    слово-разрыв: слово-разрыв;
    -ms-дефисы: авто;
    -moz-дефис: авто;
    -webkit-дефисы: авто;
    дефисы: авто;
}

Обрабатывает большинство странных ситуаций с разными браузерами.

2

Обновленный ответ должен быть:

overflow-wrap:break-word;

Это разобьет слово, которое само по себе не сможет поместиться в отдельной строке, но оставит все остальные слова как есть (см. здесь overflow-wrap).

Вы также можете использовать:

overflow-wrap:anywhere; , но это позволит разрывать строки после любого слова, чтобы уменьшить ширину элемента. См. отличие, описанное ниже, от MDN:

[break-word is] То же, что и любое значение, с обычно неразрывными словами, разрешенными для разрыва в произвольных точках, если в строке нет других допустимых точек разрыва, но возможности мягкого переноса, представленные разрывом слова, НЕ учитываются, когда вычисление внутренних размеров минимального содержимого.

Кроме того, в любом месте не поддерживается Internet Explorer, Safari и некоторыми мобильными браузерами, в то время как break-word поддерживается во всех основных браузерах (см. [здесь] [2]).

слово-разрыв: слово-разрыв; больше не следует использовать, потому что он устарел в пользу overflow-wrap:break-word; . Теперь свойство word-break предназначено для использования, когда вы хотите разбить слова независимо от того, могут ли они поместиться на отдельной строке (например, первый пример OP с word-break: break-all .

В отличие от word-break, overflow-wrap создаст разрыв только в том случае, если целое слово не может быть размещено на отдельной строке без переполнения.

(Из overflow-wrap, также связанного выше)

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

В CSS вы можете использовать дефис : auto , хотя в основном вам все равно нужно дублировать его, используя префиксы поставщиков. Поскольку это не работает в IE 9, вместо этого вы можете рассмотреть расстановку переносов на основе JavaScript, например Hyphenate.js. В обоих случаях необходимо использовать языковую разметку ( 9атрибут 0025 lang ).

Разрыв длинных строк без дефиса — это отдельная проблема. Их лучше всего обрабатывать в предварительной обработке, но в простой настройке word-break: break-word (что означает неправильное нарушение слов, например, на английском языке) может рассматриваться как чрезвычайная ситуация.

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

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