Css перенос строк – Как добавить с помощью свойств CSS перенос строки

Кроссбраузерный способ переноса строки в CSS

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

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

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

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

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

.word-break { -ms-word-break: break-all; word-break: break-word; word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

Я нашел его тут и мне это очень помогло, так как я не знал как справиться с проблемой переноса строк.

word-break используется для переноса слов. Исключением является CJK (C — Chinise — Китайский, J — Japaneses — Японский  и K — Korean — Корейский) — для этих языков это свойство не работает.

hyphens нужен для того, чтобы установить правила распределения переносов слов.

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

Все что вам нужно сделать — это прописать имя класса — word-break для элемента и все готово!

Для примера выше, я специально сделал демо, которые можно просмотреть ниже.

В демо ниже показано два квадрата, для первого (верхнего) я не использовать класс word-break, о котором я говорил выше, а для второго (нижнего) я его использовал.

На этом все. А что вы используете для своего сайта?

Если у вас есть какие-либо вопросы — то пишите их ниже к этой записи.

bologer.ru

Передряги при переносах — 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 (последний пятый пример) схлопывает пробельные символы (кроме перевода строки)

и принуждает «цепочку» текста умещаться в контейнер.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

css-live.ru

Перенос текста на кнопке | CSS — Примеры

  • Текст в кнопке в две строки
  • Перенос длинного слова в button
  • Перенос длинного слова в input
  • Запретить переносить слова на новую строку
  • Как с помощью CSS настроить перенос слов

Перенос текста в button и input

Первый вариант наиболее хорош.

слово
слово <button>слово<br>слово</button>
<input value="слово
слово" type="button">
<input value="слово&#13;&#10;слово" type="button">
<input value="слово&#x00A;слово" type="button">
<input type="button" value="слово слово" style="width: 5em; white-space: pre-line;">

Перенос длинного слова в кнопке

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

Тег button

11111111111111111111111111111111111111111111111

<button style="word-break: break-all;">11111111111111111111111111111111111111111111111</button>

11111111111111111111111111111111111111111111111

<button style="white-space: pre-line;">11111111111111111111111111111111111111111111111</button>

11111111111111111111111111111111111111111111111

<button style="overflow-wrap: break-word;">11111111111111111111111111111111111111111111111</button>

11111111111111111111111111111111111111111111111

<button style="word-wrap: break-word;">11111111111111111111111111111111111111111111111</button>

11111111111111111111111111111111111111111111111

<button style="-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;">11111111111111111111111111111111111111111111111</button>

11111­111111111111111111111111111111111111111111

<button>11111&shy;111111111111111111111111111111111111111111</button>

11111​111111111111111111111111111111111111111111

<button>11111&#8203;111111111111111111111111111111111111111111</button>

Тег input

shpargalkablog.ru

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

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