Как сделать чтобы текст переносился css

Перенос текста с помощью CSS и HTML

Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.

Перенос текса на следующую строку

Для переноса текста можно использовать специальный html тег <br />. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.

Вот что получим:

Как сделать CSS перенос слова на следующую строку?

Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:

Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например:

Выглядит не очень! Не правда ли ?!

Вот что получится:

Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:

А вот CSS код для переноса текста, который записывается в файл стилей вашего шаблона или страницы сайта:

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

Перенос слов в тексте вручную

Если текста не очень много и критически важно чтобы всё переносилось по правилам, то перенос слов в тексте можно осуществить при помощи специального символа
&shy;

Этот специальный символ ставится в том месте, где нужно осуществить перенос.
Например:

Выглядеть это будет так:

Перенос слов в тексте при помощи свойства hyphens

Данное CSS свойства сравнительно новое и не очень хорошо поддерживается более старыми версиями браузеров. Однако, несмотря на это, оно наилучшим образом осуществляет перенос слов и текста, так как основывается на встроенном словаре браузера и автоматически проставляет знак «-» в конце строки.

СSS код блока с текстом в этом случае выглядит так:

Вот результат его использования данного CSS свойства:

В коде это будет выглядеть так:

Как видите перенос текста можно осуществлять несколькими способами как средствами CSS так и HTML.

Надеюсь что данная статья была для вас полезной! Если у вас возникнут какие-то вопросы – пишите их в комментариях. Подписывайтесь на обновления блога и до встречи в следующих статьях!

Читайте также:

Подписаться на рассылку

3 комментария

Фигня это, word-wrap:break-word и делов то

Скажите, пожалуйста, а как элемент перенести на новую строку? У меня в форме заказа круглые кнопки для выбора региона размещены перед фразой «доставка Почтой», а нужно сделать или после фразы или с новой строки

Здравствуйте! Скорее всего, Вам нужно вычислить класс или идентификатор элемента, внутри которого находится надпись «доставка Почтой», а затем для этого элемента в CSS задать display:block; если не поможет, то добавить ещё width: 100%.
.block <
display:block;
width: 100%;
>
Только вместо .block будет Ваш класс или идентификатор.
О том как определить класс и идентификатор написано здесь «Как определить ID и класс элемента на странице?»

Перенос строки в HTML и CSS с помощью тегов: быстрая инструкция

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

Перенос строки силами HTML

Самы й примитивный способ , как осуществить перенос на новую строку , — это использовать чередование тегов <p> или <div>. Оба эти тега работают примерно по одинаковому принципу, то есть любо й контент , помещенны й внутри этих тегов , будет начинаться с новой строки.

Тег <div> — это более широкий тег, поэтому использовать его только для переноса строк — это дурной тон, но вариант такой есть.

Тег <p> — это абзац. Все мы знаем еще со времен школьной скамьи, что абзац всегда начинается с новой строки. Поэтому именно <p> позволяет красиво разбивать текст на абзацы и осуществ лять перенос строки в HTML. Тег <р> — это парный тег, поэтому не нужно забывать «закрывать» абзац тегом </р> .

Если вы хотите на своем сайте публиковать стихотворения, а там , как мы знаем , нужно применять переносы строк, чтобы стих выглядел красиво, то в HTML есть специальный для этого тег <pre>, который также является парным и закрывается тегом < / pre>. Его преимущество в том, что все, что вы поместите внутри тега , на вашем сайте не будет подвергаться изменениям. То есть, если вы разместите внутри тега стихотворение из 4-х столбиков, на вашем сайте оно отразится, как стихотворение из 4-х столбиков.

Но что делать, если нужен перенос единственной строки в HTML или необходимо осуществить перенос единственного слова на новую строку и т. д. В этих случая х применять какой-либо из описанных выше тегов будет нецелесообразно. Когда возникнет такая потребность , нужно примен и ть тег <br>. Данный тег является одиночным , и его можно использовать сколько угодно. Можно даже применять его после каждой буквы одного слова, чтобы написать слово вертикально.

Одно важное замечание: все теги, описанные выше , обязательно применяются только внутри тега <body>.

Перенос строки или слов в HTML при помощи CSS

• overflow-wrap со значениями: break-word

• word-wrap со значениями: break-word

• word-break со значениями: keep-all, break-all

• line-break со значениями: loose, normal, strict

• hyphens со значениями: none, auto

Заключение

Как правило, если нужен единичный перенос строки в HTML, то проще всего воспользоваться тегом <br>, именно он является самым распространенным и эффективным методом.

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

Мы будем очень благодарны

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

Как создать перенос слов CSS — абзацы с переносом слов CSS

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

Изучая статьи, которая подобрал для вас, выше, вы также узнаете массу полезных свойств, а также узнаете о новых возможностях CSS3, которая позволяет использовать меньше еще меньше изображений на сайте.

Создаем перенос слов

Текст без переносов

Если кто-то не понял о чем идет речь, вот пример без использования переноса слов:

С переносами

А вот пример, когда мы используем перенос слов CSS:

Круто! А как это сделать в коде?

Сейчас, я думаю, все прекрасно понимают что мы будем делать. Поэтому пора узнать о новом свойстве, которое есть в CSS3!

А пишется это свойство вот так — hyphens .

Просто, не так ли? Но для каждого из браузеров есть свои префиксы, поэтому в коде это выглядит так:

Не забывайте растягивать текст по всей ширине блока с помощью свойства text-align: justify , иначе нужного результата вы не увидите.

Вывод

Короткий и простой урок, который позволит сделает ваш сайт еще более «удобным» для пользователя. Ведь мы ежедневно читаем огромное количество информации в сети — так давайте же сделаем этот процесс максимально приятным для посетителей! Ведь перенос слов CSS сделать очень легко, добавив пару строчек кода в ваш файл стилей.

Успехов!

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

Отправить статью

Сохраните ссылку на статью, чтобы прочитать позже. Отправить ссылку на материал в:

Введите Email ниже:

Ссылка на статью отправлена вам на Email.

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

Интересное и главное простое решение, надо запомнить, возможно пригодится в работе.

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

Елена, вот список префиксов, которые работают с этим свойством в разных браузерах:

p <
-webkit-hyphens: auto; /* для браузера Chrome и Safari */
-moz-hyphens: auto; /* для браузера Firefox */
-ms-hyphens: auto; /* для браузера Internet Explorer 10 */
hyphens: auto;
>
Но вам нужно писать обязательно все 4 свойства! Чтобы во всех этих браузерах был перенос слов.

Ведь мы ежедневно читаем огромное количество информации в сети — так давайте же сделаем этот процесс максимально приятным

вот и начали бы с себя..

Вам неудобно читать текст на моём сайте?

ни одного переноса в статье нет)

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

Для примера я уменьшил ширину окна браузера (фото ниже):

Всё правильно человек написал:

Только это пока рабочий проект (см. – https://webref.ru/css/hyphens ), поэтому некоторый браузеры поддерживают это свойство, а некоторые – нет.

На большом мониторе под Windows – не работает, а вот на планшете Lenovo Yoga Tablet 2 – переносы работают…

Юрий, спасибо! Но у меня не перенос слов получился, а просто текст стал ровнее (каждая строчка точно вписывается от первой буквы первого слова, до последей буквы последнего в каждой строке), поразительно!

Я смотрю, это за счет увеличения пробелов. Видно у меня там еще какое-то правило прописано.

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

Надо для меню задать правило — переносим на новую строку все слова кроме первого.

2. Когда не помещаются

Виноват. Не для меню, а для названия модуля.

Ребят, на самом деле, если у вас не работают переносы, дело тут не в ширине окна браузера. Словарь переносов хранится в браузере и подключается только при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к элементу <html> или непосредственно к абзацу текста.

Переносы не работают в Chrome и Opera.

Единственное кросс-браузерное решение — это вставить мягкие переносы (мнемокод "&shy;") в места, где вы допускаете вставлять дефис и разбивать слово с последующим переносом в случае возможности (если ширина позволяет). Можно воспользоваться сервисом автоматической расстановки мягких переносов , вставляете, например, там текст "расставить переносы правильно" и получаете готовый html — "рас&shy;ста&shy;вить пе&shy;ре&shy;но&shy;сы пра&shy;виль&shy;но" его вставляете у себя на сайте. Всё будет переноситься предсказуемо и кросс-браузерно.

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

Как сделать чтобы текст переносился css

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

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

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

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

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

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

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

и после применения значения 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

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

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

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

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

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

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

Оцените статью:

Статьи

Комментарии

Внимание. Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm