При отображении текстовых документов в браузере место переноса
строки в пределах абзаца определяется автоматически в зависимости от размера
шрифтов и размера окна просмотра. Перенос строки может осуществляться только
по символам-разделителям слов (например, пробелам). Иногда в документах требуется
задать принудительный перевод строки, реализующийся независимо от параметров
настроек браузера. Для этого служит тег принудительного перевода строки
,
который не имеет соответствующего закрывающего тега. Включение тега
в текст документа обеспечит размещение последующего текста с начала новой строки.
Например, такой подход может использоваться для создания структур типа списков
без использования специальных тегов разметки списка. Или, например, без данного
тега не обойтись для отображения стихотворений и т. п.
Приведем пример использования принудительного перевода
строки (рис. 1.8):
Использование принудительного перевода
строкиНад омраченным Петроградом
Дышал ноябрь осенним хладом.
Плеская шумною волной
В края своей ограды стройной,
Нева металась, как больной
В своей постеле беспокойной.
А.С.Пушкин. Медный всадник
Рис. 1.8.
Тег
можно использовать для
принудительного перевода строки
В отличие от тега абзаца
При использовании тега
не будет образована пустая строка.
Использование тега
требует осторожности - возможна
ситуация, когда браузер уже сделал перевод строки за одно-два слова до того,
как встретил ваш тег
. Это бывает в случае, если ширина окна программы
просмотра читателя меньше, чем тот же параметр программы, с помощью которой
вы тестировали ваш документ. При этом может получиться, что в строке посреди
абзаца останется только одно слово, нарушая тем самым красоту компоновки документа.
Примечание
При использовании тега
для разбивки текста,
обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий
обтекание текста. Об этом можно прочитать в главах 3 и 4.
Теги u
Бывают ситуации, когда требуется выполнить операцию противоположного
назначения - запретить перевод строки. Для этого существует тег-контейнер .
Текст, размеченный этим тегом, будет гарантированно располагаться в одной строке,
независимо от ее длины. Если при этом получающаяся строка будет выходить за
пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки.
Примечание
Для обеспечения неразрывности текста, располагаемого
в ячейках таблиц, существует специальный параметр NOWRAP тега . Об
этом можно узнать в главе 4.
Размечая текст с помощью тега неразрывной строки
можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру
читателя место возможного перевода строки, что будет выполнено только при необходимости
(так называемый "мягкий" перевод строки). Это можно осуществить, поставив
в нужном месте текста тег (Word BReak), который так же, как и тег
, не нуждается в закрывающем теге.
Примечание
Тег вообще не поддерживается браузером
Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте,
размеченном тегами .
Все или почти все используют в верстке . Много ли из нас, поставив в коде
задумывается: а действительно ли нужен он тут? Среди неискушенных верстальщиков часто можно увидеть верстку такого характера: верстка меню
А еще можно встретить вот такие замечательные абзацы:
Может возникнуть вопрос: если на сайте отображается все по дизайну, что тут не так? А не так тут — этот кошмарный, кривой, ламерский код, который говорит об очень низкой квалификации верстальщика, который не удосужился даже разобраться в назначениях .
Применять
для формирования абзацев — это все равно, что забивать гвозди шуруповертом (это тоже инструмент, почему бы и не забить гвоздь, другой).
Для чего предназначен тег
?
update 23.02.10 — с "фокусами" с white-space: pre нужно быть внимательными, т.к. при таком форматировании строки, которые не вмещаются в блок, автоматически не переносятся на новую строку. Особенно это актуально для резиновых дизайнов. В таких случаях все же приходится применять
.
P {
white-space: pre;
}
Заметка
Сообщество фанатов семантической верстки вообще не включили
в .
Где не должно быть
?
- использовать теги по назначению: для абзацев — это < >, для списков и — < >, < >, < > и т.д.;
- для форматирования текста и задания отступов использовать , такие как , ;
- использовать отдельные элементы для создания строк (для этого лучше всего подходят нейтральные элементы разметки < > и < >).
Рассмотрим несколько практических примеров. Абзацы:
Высокопроизводительное решение обладает большой пропускной способностью — до 6.2 Gbps, и идеально подходит не только для передачи голоса и видео, но так же и для новых приложений, требовательных к полосе пропускания, таких как on-line игры.
SGSN способен поддерживать до 1,5 миллионов активных PDP сессий.
P {
margin-bottom: 12px;
}
Несколько строк номеров телефонов:
The HTML
element
produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
As you can see from the above example, a
element is included at each point where we want the text to break. The text after the
begins again at the start of the next line of the text block.
Attributes
Deprecated attributes
clear
Indicates where to begin the next line after the break.
Styling with CSS
The
element has a single, well-defined purpose - to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.
You can set a margin on
elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice - you should use the line-height property that was designed for that purpose.
Examples
Simple br
In the following example we use
elements to create line breaks between the different lines of a postal address:
Mozilla
331 E. Evelyn Avenue
Mountain View, CA
94041
USA
The result looks like so:
Accessibility concerns
Creating separate paragraphs of text using
is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within
s. This can be a confusing and frustrating experience for the person using the screen reader.
Use
Elements, and use CSS properties like margin to control their spacing.
Technical summary
| Content categories
|
Flow content , phrasing content .
|
|---|
| Permitted content
|
None, it is an empty element .
|
|---|
| Tag omission
|
Must have a start tag, and must not have an end tag. In XHTML documents, write this element as
.
|
|---|
| Permitted parents
|
Any element that accepts phrasing content .
|
|---|
| Permitted ARIA roles
|
Any
|
|---|
| DOM interface
|
). It inherits from HTMLElement."> HTMLBRElement
|
|---|
Specifications
| Specification
|
Status
|
Comment
|
|---|
HTML Living Standard
The definition of "
" in that specification.
|
Living Standard
|
|
HTML5
The definition of "
" in that specification.
|
Recommendation
|
|
HTML 4.01 Specification
The definition of "
" in that specification.
|
Recommendation
|
|
Browser compatibility
The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
|
| Desktop
| Mobile
|
|---|
|
| Chrome
| Edge
| Firefox
| Internet Explorer
| Opera
| Safari
| Android webview
| Chrome for Android
| Firefox for Android
| Opera for Android
| Safari on iOS
| Samsung Internet
|
|---|
| br
| Chrome
Full support
1
| Edge
Full support
Yes
| Firefox
Full support
1
| IE
Full support
Yes
| Opera
Full support
Yes
| Safari
Full support
Yes
| | | | | | |
|---|
| clear Deprecated
| Chrome
Full support
1
| Edge
Full support
Yes
| Firefox
Full support
1
| IE
Full support
Yes
| Opera
Full support
Yes
| Safari
Full support
Yes
| WebView Android
Full support
Yes
| Chrome Android
Full support
Yes
| Firefox Android
Full support
4
| Opera Android
Full support
Yes
| Safari iOS
Full support
Yes
| Samsung Internet Android
Full support
Yes
|
|---|
| Браузер
|
Internet Explorer
|
Netscape
|
Opera
|
Safari
|
Mozilla
|
Firefox
|
|---|
| Версия
|
5.5
|
6.0
|
7.0
|
6.0
|
7.0
|
8.0
|
7.0
|
8.0
|
9.0
|
1.0
|
1.7
|
1.0
|
2.0
|
|---|
| Поддерживается
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
Да
|
|---|
| HTML:
|
3.2
|
4
|
XHTML:
|
1.0
|
1.1
|
Описание
Тег
устанавливает перевод строки в том
месте, где этот тег находится. В отличие от тега параграфа Использование тега BR
не добавляет пустой отступ перед
строкой. Если текст, в котором используется перевод строки, обтекает плавающий
элемент, то с помощью параметра clear
тега
можно сделать так, чтобы следующая строка начиналась ниже элемента.
Синтаксис
Текст
текст
Параметры
clear Сообщает браузеру, как обрабатывать следующую строку, если текст обтекает
плавающий элемент.
Закрывающий тег
Не требуется.
Пример 1. Использование тега
Тег BR
Р.Л. Стивенсон
Лето в стране настало,
Вереск опять цветет.
Но некому готовить
Вересковый мед.
Результат данного примера показан ни рис. 1.
Рис. 1. Вид текста при использовании тега
Описание параметров тега
Параметр CLEAR
| HTML:
|
3.2
|
4
|
XHTML:
|
1.0
|
1.1
|
Описание
Параметр clear
сообщает браузеру, как обрабатывать
следующую строку, если текст обтекает плавающий элемент. Плавающим элементом
называется изображение, у которого установлен параметр align
или слой, к которому применяется свойство CSS float
.
Результат использования параметра clear
зависит
от края, по которому выравнивается элемент и значения аргумента clear
.
Так, если изображение выравнивается по левому краю, а значение параметра clear
тега
установлено как all
или left
, то текст после тега
будет отображаться ниже рисунка. Любые другие значения параметра clear
заставят текст располагаться справа от изображения и обтекать его.
Синтаксис
Аргументы
all Отменяет обтекание элемента одновременно с правого и левого края. left Отменяет обтекание с левой стороны элемента, расположенного после тега
. right Отменяет обтекание с правой стороны элемента. none Отменяет действие данного свойства.
Значение по умолчанию
Аналог CSS
Пример 2. Отмена обтекания текста
Тег BR, параметр clear
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te
feugat nulla facilisi.
Результат примера показан на рис. 2.
Рис. 2. Отмена обтекания блока текстом
Примечание
Использование параметра clear
в
спецификации HTML 4 осуждается и взамен рекомендуется применять элемент CSS
clear
- BR { clear: both | left | none
| right }.
|
Часто возникает потребность добавить новый абзац, но без пустой строки, которую вставляет тег абзаца
Для некоторых фрагментов текста принятые для абзацев стандартные интервалы просто неуместны. Это могут быть надписи под картинками и в таблицах, стихи, цитаты, сноски и примечания.
Для принудительного переноса строк предусмотрен специальный тег, функция которого заложена в его названии br (break row - "разорвать ряд, строку"). Тег
языка гипертекстовой разметки html означает, что все следующее за ним содержимое должно начинаться с новой строки. Если нужно, можно проставить несколько тегов подряд, чтобы добиться необходимого интервала.
Тег
не чувствителен к регистру и не требует закрывающего тега, потому что это пустой элемент, но лучше привыкать закрывать все теги. В XHTML тег разрыва должен быть "наглухо закрыт" на обратный слэш.
Пример использования тега разрыва
Тег br в действии < /title></p><p><р> Прогул на службе </р></p><p><p>Еще нигде и никогда <br></p><p>Я не был столь плохим <br></p><p>Начальства алчная орда <br></p><p>Грызет меня живым </р></p><p>Прогул на службе</p><p>Еще нигде и никогда<br>Я не был столь плохим.<br>Начальства алчная орда<br>Грызет меня живым.</p><h2>Атрибут тега <br></h2><p>Единственный атрибут, которым обладает <a href="/dlya-sozdaniya-zagolovka-veb-stranicy-ispolzuetsya-teg-kak.html">html тег</a> <br>, называется Он указывает браузеру, как поступить с переносимой строкой, если тексту придется обтекать так называемый плавающий элемент, каковым может быть, например, изображение с атрибутом выравнивания align, использующим значения right/left, или блок в CSS, которому прописано свойство float.</p><p>В спецификациях по XHTML 1.0 / HTML 4.01 атрибут clear можно использовать только с Transitional, Frameset и <!DOCTYPE>, иначе код будет нерабочим.</p><h2>Свойства атрибута тега </h2><p>Эффект от применения атрибута clear зависит от его значения и расположения обтекаемого текстом плавающего элемента. Атрибут может принимать 4 значения:</p><p><br clear = "right | left | all | none"></p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy></p><p>Значение left запрещает обтекание элемента, выровненного по левому краю, поэтому текст, "споткнувшись" о тег <br>, расположится ниже изображения или иного плавающего элемента.</p><p>Точно такой результат получится от использования аргумента all, который ни за что не позволит ни справа, ни слева.</p><p>Значение right запрещает тексту обтекание элемента, выровненного по правому краю, поэтому после тега <br> тексту не останется ничего другого, как обойти изображение, обтекая его справа.</p><p>Значение none ("ни вашим, ни нашим") вообще снимает все полномочия с атрибута clear, и тег <br> молча переносит строку вниз.</p><p>Значение по умолчанию, как таковое, у атрибута clear тега отсутствует.</p><h2>Тег <br> - это мягкий перенос</h2><p>Тег разрыва строки очень удобен для создания необходимых интервалов между абзацами, внутри которых он используется как мягкий перенос, но не как средство для деления текста на абзацы.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy></p><p>Не следует слишком увлекаться тегом перевода строк для форматирования текста, потому что результаты его применения не всегда отличаются изяществом.</p><p>Например, если использовать тег <br> для перевода строк внутри абзаца, это может привести к появлению "гребенки" в окне пользователя, если оно меньше окна, на которое ориентировался веб-мастер.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
</div>
</div>
<div class="td-pb-span4 td-main-sidebar" role="complementary">
<div class="td-ss-main-sidebar">
</div>
</div>
</div>
</div>
</article>
<script type="text/javascript">
try {
var sbmt = document.getElementById('submit'),
npt = document.createElement('input'),
d = new Date(),
__ksinit = function() {
sbmt.parentNode.insertBefore(npt, sbmt);
};
npt.value = d.getUTCDate() + '' + (d.getUTCMonth() + 1) + 'uniq9065';
npt.name = 'ksbn_code';
npt.type = 'hidden';
sbmt.onmousedown = __ksinit;
sbmt.onkeypress = __ksinit;
} catch (e) {}
</script>
<div class="td-sub-footer-container td-container-wrap ">
<div class="td-container ">
<div class="td-pb-row ">
<div class="td-pb-span td-sub-footer-menu "></div>
<div class="td-pb-span
td-sub-footer-copy "> © 2024 bar812.ru. Просто о сложном. Программы. Железо. Интернет. Windows</div>
</div>
</div>
</div>
</div>
<script data-cfasync="false" type="text/javascript">
if (window.addthis_product === undefined) {
window.addthis_product = "wpwt";
}
if (window.wp_product_version === undefined) {
window.wp_product_version = "wpwt-3.1.2";
}
if (window.wp_blog_version === undefined) {
window.wp_blog_version = "4.9.1";
}
if (window.addthis_share === undefined) {
window.addthis_share = {};
}
if (window.addthis_config === undefined) {
window.addthis_config = {
"data_track_clickback": true,
"ui_language": "ru",
"ui_atversion": "300"
};
}
if (window.addthis_plugin_info === undefined) {
window.addthis_plugin_info = {
"info_status": "enabled",
"cms_name": "WordPress",
"plugin_name": "Website Tools by AddThis",
"plugin_version": "3.1.2",
"plugin_mode": "AddThis",
"anonymous_profile_id": "wp-f2d21fd70bfc0c32605b4e5e1e4ff912",
"page_info": {
"template": "posts",
"post_type": ""
},
"sharing_enabled_on_post_via_metabox": false
};
}
(function() {
var first_load_interval_id = setInterval(function() {
if (typeof window.addthis !== 'undefined') {
window.clearInterval(first_load_interval_id);
if (typeof window.addthis_layers !== 'undefined' && Object.getOwnPropertyNames(window.addthis_layers).length > 0) {
window.addthis.layers(window.addthis_layers);
}
if (Array.isArray(window.addthis_layers_tools)) {
for (i = 0; i < window.addthis_layers_tools.length; i++) {
window.addthis.layers(window.addthis_layers_tools[i]);
}
}
}
}, 1000)
}());
</script>
<script type='text/javascript'>
var tocplus = {
"smooth_scroll": "1",
"visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c",
"visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c",
"width": "Auto"
};
</script>
<script type='text/javascript' src='https://bar812.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=bbebb9a04042e1d7d3625bab0b5e9e4f'></script>
<script>
(function() {
var html_jquery_obj = jQuery('html');
if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {
var path = '/wp-content/themes/Newspaper/style.css';
jQuery.get(path, function(data) {
var str_split_separator = '#td_css_split_separator';
var arr_splits = data.split(str_split_separator);
var arr_length = arr_splits.length;
if (arr_length > 1) {
var dir_path = '/wp-content/themes/Newspaper';
var splited_css = '';
for (var i = 0; i < arr_length; i++) {
if (i > 0) {
arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
}
//jQuery('head').append('<style>' + arr_splits[i] + '</style>');
var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, '');
});
splited_css += "<style>" + formated_str + "</style>";
}
var td_theme_css = jQuery('link#td-theme-css');
if (td_theme_css.length) {
td_theme_css.after(splited_css);
}
}
});
}
})();
</script>
<div id="tdw-css-writer" style="display: none" class="tdw-drag-dialog tdc-window-sidebar">
<header> <a title="Editor" class="tdw-tab tdc-tab-active" href="#" data-tab-content="tdw-tab-editor">Edit with Live CSS</a>
<div class="tdw-less-info" title="This will be red when errors are detected in your CSS and LESS"></div>
</header>
<div class="tdw-content">
<div class="tdw-tabs-content tdw-tab-editor tdc-tab-content-active">
<script>
(function(jQuery, undefined) {
jQuery(window).ready(function() {
if ('undefined' !== typeof tdcAdminIFrameUI) {
var $liveIframe = tdcAdminIFrameUI.getLiveIframe();
if ($liveIframe.length) {
$liveIframe.load(function() {
$liveIframe.contents().find('body').append('<textarea class="tdw-css-writer-editor" style="display: none"></textarea>');
});
}
}
});
})(jQuery);
</script> <textarea class="tdw-css-writer-editor td_live_css_uid_1_5a5dc1e76f1d6"></textarea>
<div id="td_live_css_uid_1_5a5dc1e76f1d6" class="td-code-editor"></div>
<script>
jQuery(window).load(function() {
if ('undefined' !== typeof tdLiveCssInject) {
tdLiveCssInject.init();
var editor_textarea = jQuery('.td_live_css_uid_1_5a5dc1e76f1d6');
var languageTools = ace.require("ace/ext/language_tools");
var tdcCompleter = {
getCompletions: function(editor, session, pos, prefix, callback) {
if (prefix.length === 0) {
callback(null, []);
return
}
if ('undefined' !== typeof tdcAdminIFrameUI) {
var data = {
error: undefined,
getShortcode: ''
};
tdcIFrameData.getShortcodeFromData(data);
if (!_.isUndefined(data.error)) {
tdcDebug.log(data.error);
}
if (!_.isUndefined(data.getShortcode)) {
var regex = /el_class=\"([A-Za-z0-9_-]*\s*)+\"/g,
results = data.getShortcode.match(regex);
var elClasses = {};
for (var i = 0; i < results.length; i++) {
var currentClasses = results[i]
.replace('el_class="', '')
.replace('"', '')
.split(' ');
for (var j = 0; j < currentClasses.length; j++) {
if (_.isUndefined(elClasses[currentClasses[j]])) {
elClasses[currentClasses[j]] = '';
}
}
}
var arrElClasses = [];
for (var prop in elClasses) {
arrElClasses.push(prop);
}
callback(null, arrElClasses.map(function(item) {
return {
name: item,
value: item,
meta: 'in_page'
}
}));
}
}
}
};
languageTools.addCompleter(tdcCompleter);
window.editor = ace.edit("td_live_css_uid_1_5a5dc1e76f1d6");
// 'change' handler is written as function because it's called by tdc_on_add_css_live_components (of wp_footer hook)
// We did it to reattach the existing compiled css to the new content received from server.
window.editorChangeHandler = function() {
//tdwState.lessWasEdited = true;
window.onbeforeunload = function() {
if (tdwState.lessWasEdited) {
return "You have attempted to leave this page. Are you sure?";
}
return false;
};
var editorValue = editor.getSession().getValue();
editor_textarea.val(editorValue);
if ('undefined' !== typeof tdcAdminIFrameUI) {
tdcAdminIFrameUI.getLiveIframe().contents().find('.tdw-css-writer-editor:first').val(editorValue);
// Mark the content as modified
// This is important for showing info when composer closes
tdcMain.setContentModified();
}
tdLiveCssInject.less();
};
editor.getSession().setValue(editor_textarea.val());
editor.getSession().on('change', editorChangeHandler);
editor.setTheme("ace/theme/textmate");
editor.setShowPrintMargin(false);
editor.getSession().setMode("ace/mode/less");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: false
});
}
});
</script>
</div>
</div>
<footer> <a href="#" class="tdw-save-css">Save</a>
<div class="tdw-more-info-text">Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete.</div>
<div class="tdw-resize"></div>
</footer>
</div>
<script type="text/javascript" defer src="https://bar812.ru/wp-content/cache/autoptimize/js/autoptimize_d85127d8732b44d62e81e0455b3d3cb7.js"></script>
</body>
</html>
