Перенос текста с помощью CSS и HTML
Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.
Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег <br />. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Вот что получим:
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:
-
Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например:
Выглядит не очень! Не правда ли ?!
Вот что получится:
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
А вот CSS код для переноса текста, который записывается в файл стилей вашего шаблона или страницы сайта:
Всё бы ничего, но вот только переносы расставляются без знака «-» в конце строки и не по правилам.
Перенос слов в тексте вручную
Если текста не очень много и критически важно чтобы всё переносилось по правилам, то перенос слов в тексте можно осуществить при помощи специального символа
­
Этот специальный символ ставится в том месте, где нужно осуществить перенос.
Например:
Выглядеть это будет так:
Перенос слов в тексте при помощи свойства hyphens
Данное CSS свойства сравнительно новое и не очень хорошо поддерживается более старыми версиями браузеров. Однако, несмотря на это, оно наилучшим образом осуществляет перенос слов и текста, так как основывается на встроенном словаре браузера и автоматически проставляет знак «-» в конце строки.
СSS код блока с текстом в этом случае выглядит так:
Вот результат его использования данного CSS свойства:
В коде это будет выглядеть так:
Как видите перенос текста можно осуществлять несколькими способами как средствами CSS так и HTML.
Надеюсь что данная статья была для вас полезной! Если у вас возникнут какие-то вопросы – пишите их в комментариях. Подписывайтесь на обновления блога и до встречи в следующих статьях!
Читайте также:
Подписаться на рассылку
3 комментария
Фигня это, word-wrap:break-word и делов то
Скажите, пожалуйста, а как элемент перенести на новую строку? У меня в форме заказа круглые кнопки для выбора региона размещены перед фразой «доставка Почтой», а нужно сделать или после фразы или с новой строки
Здравствуйте! Скорее всего, Вам нужно вычислить класс или идентификатор элемента, внутри которого находится надпись «доставка Почтой», а затем для этого элемента в CSS задать display:block; если не поможет, то добавить ещё width: 100%.
.block <
display:block;
width: 100%;
>
Только вместо .block будет Ваш класс или идентификатор.
О том как определить класс и идентификатор написано здесь «Как определить ID и класс элемента на странице?»
Перенос строки CSS
У тега <pre> по умолчанию white-space имеет значение pre .
- в комментариях, которые заполняют посетители, далёкие от HTML. Абзацы разбиваются не тегом <p> , а перевод строки обозначается не тегом <br> , а символом , который печатает клавиша Enter .
Запретить перенос
Запрет переноса с помощью white-space: nowrap;
Запрет переноса с помощью неразрывного пробела и/или неразрывного дефиса ‑
В данном примере они более подходят, так как занимают меньше места. К тому же при использовании overflow-wrap: break-word; или word-wrap: break-word; или word-break: break-all; символы всё же в определённый момент переходят на следующую строчку.
Прокрутка при отключении автопереноса
Часто совместно со значениями pre или nowrap элементу меняется значение свойства overflow , чтобы добавить полосу прокрутки или обрезать выходящую за границу часть, дабы не появился горизонтальный скролл у всего сайта.
Разрыв строки
Тег <br>
Элементы после тега <br> будут перенесены на следующую строку с любым значением свойства white‑space .
Как перенести на следующую строчку блочный элемент
Привет!Мне нужно перенести надпись «Personal touch» на вторую строчку после иконки.Br не помогает так как это блочный элемент.
Добавьте к .second-block-2-main свойство flex-direction: column . И елементы будут в колонку.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css bootstrap sass или задайте свой вопрос.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.10.42345
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.