css переход на новую строку
Автор admin На чтение 6 мин. Просмотров 4.1k. Опубликовано
При верстке у веб-мастеров периодически возникает вопрос: как будет осуществляться перенос текста? В большинстве случаев браузер самостоятельно справляется с этой задачей. Но иногда этот процесс приходится брать под контроль, особенно оформляя длинные слова и фразы, которые при неправильном переносе теряют смысл.
Содержание
- Свойство word-wrap
- Свойство white-space
- Text-overflow
- Перенос текса на следующую строку
- Как сделать CSS перенос слова на следующую строку?
- Первый вариант переноса строк в HTML
- Второй вариант переноса строк в HTML
- Третий вариант переноса строк в HTML
Свойство word-wrap
В HTML для разделения строк существует специальный тег
. Но его слишком частое использование считается среди разработчиков дурным тоном и зачастую свидетельствует о непрофессионализме.
Как доказательство, представьте, что у вас есть логотип и вы хотите, чтобы каждая буква начиналась с новой строки:
Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки внешнего вида элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.
Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов.
Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.
Чтобы логотипу из предыдущего примера назначить с помощью CSS перенос на новую строку каждой буквы, нужно прописать следующий код:
Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.
Свойство white-space
Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице. Сколько бы вы раз ни нажали «Ввод», браузер это проигнорирует. Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы.
В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши «Ввод». White-space со значением pre-line заставит браузер видеть в тексте Enter.
Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:
Text-overflow
Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:
- clip — просто обрезает текст;
- ellipsis — добавляет многоточие.
Чтобы свойство работало, элементу также необходимо назначить запрет на перенос строки и overflow со значением hidden.
Приветствую вас, дорогие читатели!
Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.
Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег
. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Вот что получим:
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:
- Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Выглядит не очень! Не правда ли ?!
break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом.
Вот что получится:
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
Сегодня мы с вами немного коснемся темы оформления текстов на вашем сайте.
Создавая сайт и ведя уже существующий, нужно грамотно подходить к каждой его мелочи. Я – активный пользователь Интернета, очень часто ищу различную информацию абсолютно по разным темам. Зачастую встречаю сайты, на которых информация представлена примерно в таком виде:
Не говоря уже о том, что здесь нет никаких выделений (главного в тексте), так и отсутствуют какие-либо параграфы, или попросту – переносы строк. Текст может быть и корректным с точки зрения орфографии и его темы, но визуально – он некомфортен для восприятия. Согласитесь, такой вид куда более читабельный и не «отпугивает» наших пользователей:
Неважно, коммерческий ваш сайт или это обычный блог – всем этим нюансам должно быть уделено отдельное внимание. Именно поэтому сегодня я покажу вам целых три варианта переноса строк в вашем тексте.
Для наглядности за основу мы возьмем популярный в кругах дизайнеров и верстальщиков текст «Lorem Ipsum», а если быть точнее – то несколько его параграфов:
и рассмотрим популярные способы переноса строк в HTML.
Первый вариант переноса строк в HTML
Первый и, наверное, самый популярный и в то же время специально созданный тег для переноса строк – это:
Вы могли видеть этот тег и без слэша (косой черты) на конце, разницы в этом особо нет, просто приведенный выше вариант является более валидным (правильным).
Использовать его вы можете сколько угодно раз. Одно использование – один перенос строки, соответственно, два этих тега, поставленные подряд, дают двойной перенос.
Второй вариант переноса строк в HTML
В HTML существует такое понятие, как параграфы. Для них отведен специальный тег типа:
Весь текст, заключенный в него, переносится на новую строку. По умолчанию (если нет глобальных стилей) он имеет свой отступ. Использование следующее:
Здесь стоит отметить то, что использование пустого тега типа:
не даст вам дополнительной пустой строки, как это можно сделать в первом варианте. Для того чтобы отредактировать желаемый отступ между параграфами, воспользуйтесь глобальными стилями:
Или же присвойте параграфу свой идентификатор, за счет которого примените свой персональный стиль:
Этот вариант оформления текстов я люблю больше всего, так как можно настроить желаемое расстояние между параграфами.
Тег из первого же варианта я использую редко.
Третий вариант переноса строк в HTML
Этот вариант похож на вид параграфов, только вместо тега «p» используется тег «div»:
Принцип работы тот же самый – каждый блок текста, обернутого в эту конструкцию, начинается с новой строки. Пустой тег не дает дополнительной новой строки. Что касается отступов, в отличие от параграфов, то здесь они отсутствуют. Но вы можете настроить их и сами, через глобальные стили:
или же через отдельный идентификатор блока:
Все описанное выше, на мой взгляд, – это самые популярные способы переноса строк в вашем тексте. Все расписано максимально подробно, так что вопросов возникнуть не должно.
Css переход на новую строку
При верстке у веб-мастеров периодически возникает вопрос: как будет осуществляться перенос текста? В большинстве случаев браузер самостоятельно справляется с этой задачей. Но иногда этот процесс приходится брать под контроль, особенно оформляя длинные слова и фразы, которые при неправильном переносе теряют смысл.
Свойство word-wrap
В HTML для разделения строк существует специальный тег
. Но его слишком частое использование считается среди разработчиков дурным тоном и зачастую свидетельствует о непрофессионализме. Как доказательство, представьте, что у вас есть логотип и вы хотите, чтобы каждая буква начиналась с новой строки:
Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки внешнего вида элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.
Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all.
Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.
Чтобы логотипу из предыдущего примера назначить с помощью CSS перенос на новую строку каждой буквы, нужно прописать следующий код:
Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.
Свойство white-space
Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице.
Сколько бы вы раз ни нажали «Ввод», браузер это проигнорирует. Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы.
В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши «Ввод». White-space со значением pre-line заставит браузер видеть в тексте Enter.
Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:
Text-overflow
Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:
- clip — просто обрезает текст;
- ellipsis — добавляет многоточие.
Чтобы свойство работало, элементу также необходимо назначить запрет на перенос строки и overflow со значением hidden.
Приветствую вас, дорогие читатели!
Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.
Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег
. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Вот что получим:
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:
- Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например:
Выглядит не очень! Не правда ли ?!
break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом.
Вот что получится:
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
Сегодня мы с вами немного коснемся темы оформления текстов на вашем сайте. Создавая сайт и ведя уже существующий, нужно грамотно подходить к каждой его мелочи. Я – активный пользователь Интернета, очень часто ищу различную информацию абсолютно по разным темам. Зачастую встречаю сайты, на которых информация представлена примерно в таком виде:
Не говоря уже о том, что здесь нет никаких выделений (главного в тексте), так и отсутствуют какие-либо параграфы, или попросту – переносы строк. Текст может быть и корректным с точки зрения орфографии и его темы, но визуально – он некомфортен для восприятия. Согласитесь, такой вид куда более читабельный и не «отпугивает» наших пользователей:
Неважно, коммерческий ваш сайт или это обычный блог – всем этим нюансам должно быть уделено отдельное внимание. Именно поэтому сегодня я покажу вам целых три варианта переноса строк в вашем тексте.
Для наглядности за основу мы возьмем популярный в кругах дизайнеров и верстальщиков текст «Lorem Ipsum», а если быть точнее – то несколько его параграфов:
и рассмотрим популярные способы переноса строк в HTML.
Первый вариант переноса строк в HTML
Первый и, наверное, самый популярный и в то же время специально созданный тег для переноса строк – это:
Вы могли видеть этот тег и без слэша (косой черты) на конце, разницы в этом особо нет, просто приведенный выше вариант является более валидным (правильным).
Использовать его вы можете сколько угодно раз. Одно использование – один перенос строки, соответственно, два этих тега, поставленные подряд, дают двойной перенос.
Второй вариант переноса строк в HTML
В HTML существует такое понятие, как параграфы. Для них отведен специальный тег типа:
Весь текст, заключенный в него, переносится на новую строку. По умолчанию (если нет глобальных стилей) он имеет свой отступ. Использование следующее:
Здесь стоит отметить то, что использование пустого тега типа:
не даст вам дополнительной пустой строки, как это можно сделать в первом варианте.
Для того чтобы отредактировать желаемый отступ между параграфами, воспользуйтесь глобальными стилями:
Или же присвойте параграфу свой идентификатор, за счет которого примените свой персональный стиль:
Этот вариант оформления текстов я люблю больше всего, так как можно настроить желаемое расстояние между параграфами. Тег из первого же варианта я использую редко.
Третий вариант переноса строк в HTML
Этот вариант похож на вид параграфов, только вместо тега «p» используется тег «div»:
Принцип работы тот же самый – каждый блок текста, обернутого в эту конструкцию, начинается с новой строки. Пустой тег не дает дополнительной новой строки. Что касается отступов, в отличие от параграфов, то здесь они отсутствуют. Но вы можете настроить их и сами, через глобальные стили:
или же через отдельный идентификатор блока:
Все описанное выше, на мой взгляд, – это самые популярные способы переноса строк в вашем тексте. Все расписано максимально подробно, так что вопросов возникнуть не должно.
Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого — CSS-LIVE
Перевод статьи Where Lines Break is Complicated. Here’s all the Related CSS and HTML. с сайта css-tricks.com для CSS-live.ru, автор — Крис Койер
Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается.
Вот как может выглядеть ситуация с не поместившимся текстом:
Текст, вылезающий из бокса — визуальная проблема.
Первое решение — overflow: hidden;, как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть на нем мышью, но не каждый может об этом знать и не всегда такое возможно.
Название свойства «overflow» — «переполнение» — здесь весьма к месту, ведь именно оно, переполнение, у нас и происходит. Ещё есть overflow: auto;, приводящее к горизонтальному скроллу. Иногда может и подойди, но наверняка вы тоже согласитесь, что обычно это решение неприемлемо.
Нам нужно, чтобы этот зараза длинный URL (или любой текст) разорвался, чтобы перенестись на следующую строку. Варианты есть! Для начала подготовим место, где мы будем со всем этим разбираться.
Экспериментальная площадка
Здесь я взял блок с содержимым, размер которого можно менять, и решил соединить его с разными CSS-свойствами и их значениями, которые можно включать/выключать, чтобы увидеть, как это влияет на содержимое.
Уверен, что этот список неполный и не идеальный. Это лишь некоторые из знакомых мне свойств.
See the Pen Figuring Out Line Wrapping by Максим (@psywalker) on CodePen.
Кувалда: word-break: break-all;
Позволяет словам разрываться везде. Свойство word-break «решает» проблему:
p {
word-break: break-all;
}
В переписке по электронной почте fantasai пояснила, что это работает, поскольку свойство word-break меняет определение того, что считать словом. Значение break-all по сути воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок). Значение keep-all
Прицельное решение:
overflow-wrap: break-word;Свойство overflow-wrap кажется наиболее эффективным решением для данной проблемы.
p {
word-wrap: break-word; /* old name */
overflow-wrap: break-word;
}
На первый взгляд это может походить на демо с word-break: break-all; выше, но заметьте, как в URL оно не разрывает «pen» как «pe\n», а делает перенос в конце этого слова, рядом со слешем.
fantasai объясняет:
Если слово не может разорваться, переполняя контейнер, оно может разорваться где угодно во избежание переполнения.
Решение потяжелее, иногда:
hyphens: auto;Свойство hyphens может иногда решить проблему с URL-адресами и длинными словами, но это не точно. На длинном числе, например, он споткнется. Вдобавок, hyphens влияет на весь текст, позволяя себе вольности в разрывах ради того, чтобы сделать правый край текста более ровным.
p {
hyphens: auto;
}
fantasai сказала мне:
Если «слово» находится в конце строки, его можно переносить через дефис.
Думаю, это «слово» в кавычках дает подсказку, в чем тут проблема. Некоторые неприемлемо длинные строки — не «слова», поэтому это решение — не панацея.
Будущая кувалда:
line-break: anywhere;Есть свойство line-break. В основном, кажется оно для пунктуации, но ни в одном браузере оно у меня не заработало.
fantasai сказала мне, что появится новое значение anywhere, которое:
«как
word-break: break-all;» за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.
Другие решения в HTML
Элемент <br> разобъёт строку где угодно, если только у него не будет display:none.
Элемент <wbr> — «возможный разрыв слова», что означает, что длинному слову, обычно вызывающему раздражающую проблему с переполнением можно сказать, чтобы оно разорвалось в конкретном месте. Полезно! Оно ведёт себя, как пробел нулевой ширины.
Другие решения на CSS
Символ ­ делает то же самое, что и элемент <wbr> (На самом деле не совсем, поскольку, в отличие от <wbr>, добавляет дефисы при переносе. — прим. перев.)
Можете вставить разрыв строки с помощью псевдоэлемента ::before { content: "\A"; }, если только элемент не строчный (в противном случае потребуется white-space: pre;)
P.
S. Это тоже может быть интересно:
S. Это тоже может быть интересно:Предварительно рассчитанные разрывы строк для HTML/CSS
Несмотря на постепенное улучшение, типографика на веб-страницах имеет значительно более низкое качество, чем высококачественная типографика для печати/PDF, например, производимая L a T e X или Adobe InDesign. В частности, в значительном улучшении нуждаются переносы строк и переносы. Хотя изначально в CSS никогда не указывалось, какой алгоритм разбиения строк следует использовать, все браузеры сошлись на жадном разрыве строк, который производит некачественную типографику, но является быстрым, простым и стабильным. Текстовый модуль CSS уровня 4 стандартизирует текущее поведение по умолчанию с text-wrap , в то же время вводя параметр pretty , который указывает браузеру использовать более качественный алгоритм разрыва строки. Однако на момент написания ни один браузер не поддерживал это свойство.
Недавно я наткнулся на библиотеку CSS для эмуляции внешнего вида L a T e X по умолчанию.
1 Однако он не эмулирует алгоритм разрыва строки Кнута-Пласса, что делает L T e X хорошо выглядеть. Это заставило меня задуматься, можно ли эмулировать это с помощью простого HTML и CSS. Библиотека JavaScript уже существует для эмуляции этого, но она добавляет дополнительную сложность и немного замедляет работу. Оказывается, можно заранее рассчитать разрывы строк и переносы для столбцов определенной ширины таким образом, чтобы их можно было закодировать в HTML и CSS, если веб-шрифты используются для стандартизации внешнего вида текста в различных браузерах.
Ключ в том, чтобы обернуть все потенциальные разрывы строк (вставленные через ::после псевдоэлементов) и дефисы в элементов, которые по умолчанию скрыты с display: none; . Затем медиа-запросы используются для выборочного отображения разрывов строк, характерных для данной ширины столбца. Поскольку каждая строка имеет явный разрыв строки, необходимо включить выравнивание с помощью text-align-last: justify; и интервал между словами: -10px; используется, чтобы избежать дополнительных автоматических разрывов строк из-за небольших различий в форматировании между браузерами.
Однако это представляет проблему для фактической последней строки каждого абзаца, поскольку теперь она также выравнивается по ширине, а не по левому краю. Это решается переносом каждой возможной последней строки в элемент. Используя медиа-запросы, элемент , соответствующий заданной ширине столбца, устанавливается на использование display: flex; , что делает содержимое выравниваемым по левому краю и занимает минимально необходимое пространство, тем самым отменяя выравнивание; межсловный интервал: 0; также настроен на отмену предыдущего изменения и исправление межсловного интервала. К сожалению, вложенные элементы проблематичны, потому что между ними нет пробелов; это исправляется добавлением пробела в HTML-разметку в начале и настройка white-space: pre; , чтобы пробел появился.
Я подготовил демонстрационную страницу, демонстрирующую эту технику. Он был построен путем вычисления разрывов строк в Firefox 76 с использованием букмарклета tex-linebreak и ручной вставки разметки, соответствующей разрывам строк; некоторые исправления были сделаны вручную, потому что библиотека не поддерживает должным образом длинные тире.
Разрывы строк рассчитывались для столбцов шириной от 250 до 500 пикселей с шагом 50 пикселей. Разрывы строк Кнута-Пласса приводят к значительному улучшению внешнего вида текста, особенно для более узких колонок. В дополнение к улучшенным разрывам строк я также реализовал выступающие дефисы, точки и запятые на правом поле, технику микротипографии, которая еще больше улучшает внешний вид. Чтобы (надеюсь) избежать проблем с программами чтения с экрана, aria-hidden="true" устанавливается на добавленную разметку; выбор пользователя: нет; Также установлено значение , чтобы избежать проблем с копированием текста.
Хотя этот метод отлично работает в Firefox и Chrome, он не работает в Safari, поскольку Safari не поддерживает text-align-last начиная с Safari 13. 2 Несмотря на то, что он не работает, соответствующая ошибка WebKit отмечена как «решено исправлено»; кажется, что поддержка действительно была добавлена в 2014 году, но поддержка находится за CSS3_TEXT флаг времени компиляции, который по умолчанию отключен.
Таким образом, я разработал альтернативный метод, который использовал невидимые элементы 100% ширины для принудительного разрыва строки без использования явного разрыва строки. Это снова работало в Firefox и Chrome, хотя вызывало небольшие проблемы с выделением текста, но снова имело серьезные проблемы в Safari. Похоже, что Safari неправильно обрабатывает выровненный текст с отрицательным интервалом между словами; Однако уменьшение интервала между словами вызывает дополнительные разрывы строк из-за различий в форматировании, что нарушает технику. В этот момент я отказался от поддержки Safari и просто настроил его на использование разрыва строки браузера по умолчанию, поместив CSS техники за цифрой 9.0007 @поддерживает запрос для text-align-last: justify .
Автоматическое создание разметки было бы необходимо, чтобы сделать этот метод более полезным, но демонстрационная страница служит доказательством концепции. В идеале браузеры должны реализовать улучшенный алгоритм разрыва строк, что сделало бы этот метод устаревшим.
См. также соответствующее обсуждение Hacker News. ↩
Это поддерживает даже Internet Explorer 6. ↩
Эта запись была размещена в Дизайн, Разное и помечена css, html, knuth-plass, разрывы строк, типографика. Добавьте постоянную ссылку в закладки.
Когда недостаточно — обзор 11 примеров переноса строки в HTML и CSS
На днях я вносил изменения в копию и мне нужно было добавить разрыв строки в CTA. Когда я добрался до надежного элемента разрыва строки , у меня возникло посттравматическое воспоминание о веб-разработке начала 2000-х, когда
часто использовались для добавления вертикального интервала. Это заставило меня задуматься:
Когда неправильно использовать и следует ли вместо этого использовать
Должен ли я использовать CSS для оформления разрывов строк вместо HTML-элементов? Если да, то как мне это сделать?
В этом посте я расскажу о различных методах на основе HTML и CSS для создания разрывов строк в вашем тексте, а также о методах разбиения слов для достижения правильного набора текста.
Я буду использовать первую строфу стихотворения Уолта Уитмена 1865 года «О, капитан! Мой капитан!» для демонстрации каждого метода.
Разрыв строки HTML
См. перо Разрыв строки 1 Шимин Чжан (@shimin-zhang) на КодПене.
Пример 2: У вас может возникнуть соблазн разбить каждую строку стихотворения на отдельный элемент абзаца. Это создает жесткие разрывы строк, но удаляет семантику элементов — абзац должен представлять собой целую строфу, содержащую несколько строк. Это также вводит ненужные поля и отступы между строками.
Пример 3: Это канонический вариант использования элемента разрыва строки — для разрыва строки без введения дополнительной семантики.
Пример 4: Предварительно отформатированный элемент сохраняет как разрывы строк, так и дополнительные символы пробела из HTML. Но
9Элемент 0008 точно сохраняет все форматы и не допускает переноса текста. Это приводит к переполнению нашего текста, что делает его более подходящим для рисунков и кодовых блоков ASCII.
Мы достигли предела того, что могут сделать для нас разрывы строк только в HTML, давайте взглянем на некоторые параметры CSS.
Разрыв строки CSS
См. перо Line Break 2 Шимин Чжан (@shimin-zhang) на КодПене.
Примеры 5 и 6: Свойство CSS white-space является основным соответствующим методом CSS для управления разрывами строк. Интересно, что в CSS есть атрибут line-break, но он касается только того, как знаки препинания ведут себя при разрыве строки для восточноазиатских языков.
Значения normal и pre свойства white-space соответствуют поведению тега по умолчанию и поведению тега соответственно.
Пример 7: Все становится интереснее, когда мы переходим к white-space: pre-line , где символы пробела по-прежнему свернуты, но теперь символы новой строки создают новые строки. Обратите внимание, что отступы от строк 5-8 все еще потеряны, как будто все символы новой строки теперь обрабатываются как .
Пример 8: white-space value pre-wrap действует как элемент , но также создает новые строки, поэтому наш текст не выходит за пределы родительского контейнера. Это лучшее решение для разрыва строки CSS, которое у нас есть для нашего случая использования стихотворения Уитмена.
пробел имеет еще два возможных значения. nowrap отключает разрывы строк и свертывает пробелы, а break-spaces , который ведет себя как перед переносом , но обрабатывает пробелы в конце строки без зависаний.
До сих пор мы рассматривали решения, которые разбивают строки с помощью пробела или символа новой строки. Что, если мы хотим разбить строку в середине слова?
Разрыв слова
См. перо Line Break 3 Шимин Чжан (@shimin-zhang) на КодПене.
Пример 9: Каноническим HTML-решением для работы с разрывом слов является элемент возможности разрыва строки и его родственник мягкий дефис . Оба они указывают браузеру, что это место является предпочтительным местом для разрыва слов, но только в том случае, если браузер счел это необходимым.
Пример 10: Вместо того, чтобы вручную искать все возможности разрыва слов в вашей копии, вы можете использовать свойство CSS word-break со значением break-all , чтобы позволить браузеру выбирать, когда слово должно быть разбито.
для формирования новой строки. Это похоже на автоматическую вставку после каждого символа.
Пример 11: La stly, свойство CSS hyphens со значением auto может использоваться для создания определяемых браузером дефисов для разрыва слов. Это как если бы мы добавили для каждого непробельного символа в нашем тексте. На мой взгляд, этот вариант дает нам лучший набор стихотворения, мне особенно нравится, как страх разбивается на «страшный» и естественно перетекает от одной строки к другой. 9Дефисы 0007: в руководстве вместо разрывов строк используется символ мягкого дефиса.
Final Word
Вот и все, 11 примеров добавления разрывов строк в текст!
Вот несколько эмпирических правил:
- В общем, используйте параметры разрыва строки в CSS, а не их HTML-эквивалент — разделение проблем между стилем и содержанием.
- Исключением из приведенного выше правила является семантический разрыв строки, например добавление тегов
- Другим исключением является использование
выбор места дефиса является семантическим свойством текста.
Если вы нашли этот пост полезным, поделитесь им с другими. Вам также может быть интересно узнать, допустимо ли использование нескольких элементов h2 в 2022 году или когда вам следует использовать единицу измерения px для стиля. Вы также можете подписаться на обновления по электронной почте, используя форму ниже.
Создание разрывов строк без использования в HTML
Кристина Копецки - 02 июля 2020 г.
Разрыв строки может быть добавлен к элементам HTML без использования возврата разрыва.
с помощью псевдоэлементов. Псевдоэлементы используются для стилизации определенной части элемента. Здесь мы будем использовать ::after для стилизации HTML-элемента, чтобы добавить разрыв строки.
<голова> <мета-кодировка="UTF-8">CSS ::after с \a <стиль> охватывать { отступ: 1px 8px; } диапазон :: после { содержимое: '\а'; пробел: предварительно; } <тело> <дел> Дамблдор МакГонагалл Снейп Трелони
адрес 
0" />
Но как насчет случаев, когда вы хотели бы использовать другое отображаемое значение? Это подводит нас к варианту компоновки таблицы. 
