Перенос текста с помощью CSS и HTML
Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.
Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег
. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Если вы через CSS задаёте более узкую ширину для блока с текстом то перенос текста осуществляется автоматически. То есть те слова, которые не помещаются в одной строке перескакивают на следующую.
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break.
У данного CSS свойства может быть несколько значений:
- Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы.
Например: Выглядит не очень! Не правда ли ?! - break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом. Вот что получится:
Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
Как перенести строку из CSS без использования ‹br /›?
также обратите внимание, сколько там дополнительной разметки — элемент
существует по очень уважительной причине. Если вам нужен разрыв строки, потому что это отдельные абзацы, просто пометьте их как отдельные абзацы. — person Rowland Shaw; 24.04.2010
Вам могут понадобиться структурированные строки без фактического использования абзацев. Чтобы разметить стихотворение, песню или адрес, например — person Vincent Robert; 27.04.2010
@VincentRobert Верно, но стихотворение — это канонический пример того, когда
— правильная разметка. Отрывки для стихотворения были бы «неправильными». — person Alan H.; 25.06.2013
Обратите внимание, что назначение display: block элементу приведет к разрыву строки до и после, поэтому это совсем не то же самое, что наличие одного разрыва строки. — person jerseyboy; 12.07.2013
Определенно используйте элементы ‹p›. Элемент ‹span› НЕ ДОЛЖЕН превращаться в display: block, весь смысл ‹span› в том, что он встроен. Я бы сделал это так: ‹div› ‹p› hello ‹/p› ‹p› Как дела? ‹/P› ‹/div›. Никакого выверенного CSS не требуется. — person Miles; 31.10.2013
Нет необходимости в использовании CSS. Возможно, вам все равно потребуется проверить высоту строки. — person ObjectMatrix; 19.09.2016
Вы можете использовать white-space: pre; , чтобы элементы работали как
, что сохраняет символы новой строки. Пример:
Подробнее о различиях между pre-line и pre-wrap см. для разработчиков. mozilla.org/en-US/docs/Web/CSS/white-space — person patrick; 05.11.2014
В моем случае я предпочел pre, потому что я также могу использовать переполнение текста — person Greg; 31.01.2019
Обратите внимание, что это не будет работать с response, потому что текст в конечном итоге будет объединен и будет помещен в ту же строку, что не вызовет white-space правило CSS. — person Vadorequest; 06.05.2020
Используйте
как обычно, но скройте его с помощью display: none , когда он вам не нужен.
Я ожидал, что большинство людей, задавших этот вопрос, захотят использовать CSS / адаптивный дизайн, чтобы решить, появляется ли разрыв строки в определенном месте. (и не имею ничего личного против
) Хотя это не сразу очевидно, вы можете применить display:none к тегу
, чтобы скрыть его, что позволяет использовать медиа-запросы в тандеме с семантическими тегами BR.
The quick brown fox
jumps over the lazy dog @media screen and (min-width: 20em) < br < display: none; /* hide the BR tag for wider screens (i.e. disable the line break) */ >> Это полезно в адаптивном дизайне, когда вам нужно разделить текст на две строки с точным разрывом. пример jsfiddle
Саймон, вы попали в точку — приведенный вами пример является точной причиной, по которой я исследовал этот вопрос, и решение display: none на сегодняшний день является наиболее подходящим и полезным. — person fullstackplus; 24.06.2014
Обратите внимание, что в случаях, когда это может привести к слиянию слов, вы можете использовать что-то вроде display: inline-block; width: 1em; вместо none . — person Beejor; 11.08.2016
Вы даже можете применить класс к
, если вам нужно больше контроля, но не сходите с ума! — person Simon_Weaver; 27.11.2016
Другой, почему я не подумал об этом ?! отвечать.
великолепен в том, что делает; не нужно изобретать велосипед. Спасибо! — person rinogo; 24.10.2017
Аналогичная концепция может быть применена к макету гибкого блока: stackoverflow.com/questions/29732575/ — person Simon_Weaver; 22.06.2018
Несмотря на интересный ответ, спрашивающий хотел сделать это без ‹br›, то есть с соблюдением разрывов строк в HTML, что решается некоторыми другими ответами с пре-строкой и предварительным переносом CSS. — person amh15; 10.01.2019
@ amh15 он не говорит, ПОЧЕМУ он хочет это сделать. А точнее что не так с BR. Это предварительно отформатированный текст из веб-службы прогнозов погоды или вопрос адаптивного дизайна. На момент ответа все предварительные / переносимые по словам ответы уже были на месте. Вы правы, что детали имеют значение, но мой ответ помог многим людям, которые нашли этот вопрос на основе ключевых слов, поэтому я не понимаю, почему вы должны быть такими придирчивыми. Я хотел бы знать, чем он действительно хотел заниматься. Но меня это тоже не волнует. — person Simon_Weaver; 10.01.2019
Есть несколько вариантов определения обработки пробелов и разрывов строк. Если можно поместить контент, например, с помощью тега
довольно легко получить все, что угодно. Для сохранения разрывов строк, но не пробелов используйте pre-line (не pre ), как в:
white-space: normal; /* collapse WS, wrap as necessary, collapse LB */ white-space: nowrap; /* collapse WS, no wrapping, collapse LB */ white-space: pre; /* preserve WS, no wrapping, preserve LB */ white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */ white-space: inherit; /* all as parent element */ Команда «\ a» в CSS генерирует возврат каретки. Это CSS, а не HTML, поэтому он должен быть ближе к тому, что вы хотите: без дополнительной разметки. В цитате, приведенном ниже примере, отображаются и заголовок, и ссылка на источник, и они разделяются возвратом каретки ( «\a» ):
+1, потому что это только CSS, и не рекомендуется использовать теги pre, br или изменять режим отображения на блок (что добавляет другое поведение, может сломаться, если родитель находится в display:flex и, следовательно, является взломом в этом контексте). На самом деле это не фантастика, это просто современная техника. Если вы хотите точно такую же разметку, но на самом деле реагировать по-разному, это то, что вам нужно. — person renoirb; 02.07.2014
Гениальная идея. Обратите внимание на » — не используйте простые кавычки ‘ , потому что вы хотите, чтобы \a анализировался как специальный символ. — person Hafenkranich; 11.08.2016
Я бы проголосовал за это, если бы был какой-то HTML и, возможно, Fiddle, чтобы помочь визуализировать то, что вы делаете. — person John; 20.07.2017
Это именно то, что я искал! Отлично работает для содержимого элемента, сгенерированного из JS (например, результат JSON из запроса AJAX, angular-schema-form и т. Д.), Который передается через экранирование / дезинфекцию (например, нормальное поведение экранирования AngularJS, когда не используется ngBindHtml) — person Stefan Dragnev; 18.07.2016
span < display: inline; >span:before First line of text. Next line.
Я только что нашел вариант этого подхода, который может быть полезен для многострочных input type=’text’, wrapping the input, and then laying the text over it with a wrapper div . That also requires pointer-events: none; `на :before , чтобы по-прежнему можно было нажимать кнопку ниже. — person Eric Lease; 01.02.2016
Чтобы после этого у элемента был разрыв строки, присвойте ему: display:block; Неплавающие элементы после элемента уровня блока появятся на следующей строке. Многие элементы, такие как ‹p› и ‹div›, уже являются элементами уровня блока, так что вы можете просто использовать их. Но хотя это полезно знать, на самом деле это больше зависит от контекста вашего контента. В вашем примере вы не захотите использовать CSS для принудительного разрыва строки. ‹Br /› подходит, потому что семантически тег p является наиболее подходящим для отображаемого текста. Больше разметки просто для того, чтобы повесить CSS, не нужно. Технически это не точно абзац, но тег ‹greeting› отсутствует, так что используйте то, что у вас есть. Хорошее описание вашего контента с помощью HTMl гораздо важнее — после того, как вы это сделаете, затем выясните, как сделать его красивым.
Но это делает его полной шириной контейнера, что может быть нежелательным побочным эффектом (особенно, если элемент является якорем / ссылкой). — person NickG; 20.08.2015
Да, по умолчанию элементы уровня блока занимают всю ширину, если вы не задали ширину. Прочтите мой абзац о контексте — мышление в терминах семантического контекста, а не выбор вашего HTML на основе вашего дизайна, как правило, помогает предотвратить возникновение подобных проблем. — person Syntax Error; 20.08.2015
Часто причина, по которой следует избегать тегов ‹br›, носит скорее технический, чем семантический характер. Теги ‹br› являются автономными, и вы не всегда можете их использовать, так как вы не знаете, будут ли элементы впереди существовать во время рендеринга страницы, поэтому вам могут не понадобиться пустые строки. Рассмотрим список ссылок ‹a› в вертикальном меню, где вы хотите, чтобы все они были на отдельной строке, но не можете использовать ‹br›, так как вы не знаете, какие ссылки будут скрыты из-за правил на стороне сервера. Скрытие ссылок привело бы к появлению пустых строк, если бы использовалось ‹br›. — person NickG; 21.08.2015
..По этой причине люди часто используют список ‹ul›, а затем скрывают маркеры, но это довольно взломано. Было бы лучше, если бы было правило css, которое только что говорило всегда отображать в собственной строке. — person NickG; 21.08.2015
В CSS есть такое правило. Это называется дисплей: блок. BTW ‹li› — это элементы уровня блока, поэтому они отображаются в отдельной строке. Есть также возможность плавания и очистки, но лично я думаю, что это беспорядок, если им злоупотребляют. Причина, по которой люди используют li и скрывают маркеры с помощью css, на самом деле семантическая — если они показывают список элементов, вы должны использовать тег элемента списка. Когда вы ставите семантику на первое место, все становится намного менее хакерским, даже если это кажется технически сложным — на самом деле вы получаете гораздо более простой код для работы. — person Syntax Error; 21.08.2015
Но, как я сказал в своем первом комментарии, это имеет нежелательный побочный эффект, заключающийся в том, что элементы имеют полную ширину 🙂 Мне просто нужны элементы в новой строке, а не на всю ширину. Если элемент представляет собой ссылку в дальнем левом углу страницы, это означает, что даже щелчки в дальнем правом углу экрана переходят по ссылке. — person NickG; 21.08.2015
Это не нежелательно. Дело в том, как работает CSS, и поэтому теги ‹a› являются встроенными элементами. Это не по теме для этого вопроса и ответа, но вы справляетесь с этим, помещая тег ‹a› внутри элемента уровня блока для (просто текстовой ссылки) или явно устанавливая ширину, если вы хотите, чтобы это был уровень блока, (например, если вы хотите иметь возможность нажимать на большую область, включая отступы) Вы также можете установить inline-block и float и очистить их по мере необходимости в зависимости от того, что вы делаете. — person Syntax Error; 24.08.2015