When displayed text documents in the browser, the line break position within a paragraph is determined automatically depending on the size of the fonts and the size of the viewport. Line breaks can only be carried out on word separator characters (for example, spaces). Sometimes in documents it is required to set a forced line feed, which is implemented regardless of the browser settings. For this, the forced line feed tag is used.
, which does not have a corresponding end tag. Tag Inclusion
into the text of the document will ensure that the subsequent text is placed from the beginning new line. For example, this approach can be used to create list-type structures without using special list markup tags. Or, for example, this tag is indispensable for displaying poems, etc.
Here is an example of using a forced line feed (Fig. 1.8):
Using forced line feedAbove the darkened Petrograd
November breathed autumn chill.
Rushing in a noisy wave
At the edge of its slender fence,
Neva rushed about like a patient
Restless in your bed.
A.S. Pushkin. Bronze Horseman
Rice. 1.8. Tag
can be used to force a line break
Unlike the paragraph tag
When using the tag
no empty string will be generated.
Tag usage
requires caution - it is possible that the browser has already done a line feed one or two words before it met your tag
. This happens if the width of the reader's viewer window is smaller than the same setting in the program you were testing your document with. In this case, it may turn out that only one word remains in the line in the middle of a paragraph, thereby violating the beauty of the layout of the document.
Note
When using the tag
to break text, wrap around an image, or a table, you can set the CLEAR option to stop text wrapping. You can read more about this in chapters 3 and 4.
tags u
There are situations when it is required to perform the operation of the opposite purpose - to prohibit a line feed. There is a container tag for this. . Text marked with this tag is guaranteed to be on one line, regardless of its length. If the resulting line extends beyond the browser's viewport, a horizontal scroll bar will appear.
Note
To ensure the continuity of the text located in the cells of the tables, there is special parameter NOWRAP tag . You can find out more about this in chapter 4.
Marking up text with the non-breaking line tag you can get very long lines. To avoid this, you can tell the reader's browser where a line break might occur, which will only be done when needed (a so-called "soft" line feed). This can be done by putting in right place text tag (Word BReak) which is the same as the tag
, does not need a closing tag.
Note
Tag not supported by the Netscape browser at all. Microsoft Browser Internet Explorer recognizes this tag only in tagged text .
All or almost all are used in layout. How many of us, putting in the code
thinks: is he really needed here? Among inexperienced typesetters, you can often see layouts of this nature: menu layout
And you can also find these wonderful paragraphs:
The question may arise: if the site displays everything by design, what is wrong here? And not so here - this nightmarish, crooked, lamer code, which speaks of a very low qualification of a layout designer who did not even bother to figure out the assignments.
Apply
for the formation of paragraphs, it's like hammering nails with a screwdriver (this is also a tool, why not hammer a nail, another one).
What is the tag for?
?
update 02/23/10 - with "tricks" with white-space: pre, you need to be careful, because with this formatting, lines that do not fit into the block are not automatically wrapped to a new line. This is especially true for rubber designs. In such cases, however, it is necessary to apply
.
P ( white-space: pre; )
The note
The community of fans of semantic layout was not included at all
in .
Where shouldn't be
?
- use tags for their intended purpose: for paragraphs, this is< >, for lists and -< >, < >, < >etc.;
- to format text and set indents use , such as , ;
- use individual elements to create lines (neutral markup elements are best suited for this< >and< >).
Let's look at some practical examples. Paragraphs:
The high performance solution has a large throughput- up to 6.2 Gbps, and is ideal not only for voice and video transmission, but also for new applications that require bandwidth, such as online games.
The SGSN is capable of supporting up to 1.5 million active PDP sessions.
P ( margin-bottom: 12px; )
Several lines of phone numbers:
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 mission |
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 supportYes | Safari Full support Yes | | | | | | |
|---|
| clear Deprecated
| Chrome Full support 1 | Edge Full support Yes | Firefox Full support 1 | IE Full support Yes | Opera Full supportYes | 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 |
|---|
| Browser |
Internet Explorer |
Netscape |
Opera |
safari |
Mozilla |
Firefox |
|---|
| Version |
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
|
|---|
| Supported |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
|---|
| HTML: |
3.2
|
4
|
XHTML: |
1.0
|
1.1
|
Description
Tag
sets a newline at the location where this tag is located. Unlike the paragraph tag Using the BR tag does not add an empty indent before the line. If the text, which uses a newline, wraps around a floating element, then using the clear parameter of the tag
you can make the next line start below the element.
Syntax
Text
text
Optionsclear Tells the browser how to handle the next line if the text wraps around a floating element. Closing tag
Not required.
Example 1: Using a tag
Tag BR
R.L. Stevenson
Summer has come in the country
The heather is blooming again.
But no one to cook
Heather honey.
Result this example neither fig. one.
Rice. 1. Type of text when using the tag
Description of tag parameters
CLEAR parameter
| HTML: |
3.2
|
4
|
XHTML: |
1.0
|
1.1
|
Description
The clear parameter tells the browser how to handle the next line if the text wraps around the floating element. A floating element is an image that has the align parameter set or a layer that is applied to css property float .
The result of using the clear parameter depends on the edge the element is aligned to and the value of the clear argument. So, if the image is left-aligned, and the value of the clear parameter of the tag
set to all or left , then the text after the tag
will be displayed below the figure. Any other value for the clear parameter will cause the text to be positioned to the right of the image and wrap around it.
Syntax
Argumentsall Undoes the wrapping of the element from the right and left edges at the same time. left Reverses the flow on the left side of the element after the tag
. right Undoes the wrapping on the right side of the element. none Cancels this property. Default value
CSS analog
Example 2: Unwrapping Text
BR tag, clear parameter
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.
The result of the example is shown in Fig. 2.
Rice. 2. Cancellation of text wrapping around the block
Note
The use of the clear parameter in the HTML 4 specification is deprecated and is recommended instead. css element clear - BR ( clear: both | left | none | right ).
|
Often there is a need to add a new paragraph, but without the empty line that the paragraph tag inserts
For some fragments of text, the standard intervals adopted for paragraphs are simply inappropriate. These can be inscriptions under pictures and in tables, poems, quotations, footnotes and notes.
For forced line wrapping, a special tag is provided, the function of which is embedded in its name br (break row - "break a row, line"). Tag
html hypertext markup language means that all following content must start on a new line. If necessary, you can put down several tags in a row to achieve the desired spacing.
Tag
is not case sensitive and doesn't require a closing tag because it's an empty element, but it's better to get used to closing all tags. In XHTML, the break tag must be "tightly closed" with a backslash.
Break tag example
The br tag in action< /title></p><p><р>Walking in the service</р></p><p><p>Nowhere else and never <br></p><p>I wasn't that bad <br></p><p>Heads of the greedy horde <br></p><p>Gnawing me alive</р></p><p>Walking in the service</p><p>Nowhere else and never <br>I wasn't that bad. <br>Heads of the greedy horde <br>Eats me alive.</p><h2>Tag attribute <br></h2><p>The only attribute that <a href="https://bar812.ru/en/oznachaet-teg-br-razryv-stroki-v-html-ispolzuem-teg-br-dlya-chego-prednaznachen-teg.html">html tag</a> <br>, is called It tells the browser what to do with the line wrapping if the text needs to wrap around a so-called floating element, such as an image with an align attribute using right/left values, or a block in CSS that has a float property.</p><p>In the XHTML 1.0 / HTML 4.01 specifications, the clear attribute can only be used with Transitional, Frameset, and<!DOCTYPE>, otherwise the code will not work.</p><h2>Tag attribute properties</h2><p>The effect of applying the clear attribute depends on its value and the location of the floated element. The attribute can take 4 values:</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 loading=lazy></p><p>The left value prevents the left-aligned element from wrapping, so the text "stumbles" on the tag <br>, will be positioned below the image or other floating element.</p><p>Exactly the same result will be obtained by using the all argument, which will never allow either the right or the left.</p><p>The right value prevents text from wrapping around a right-aligned element, so after the tag <br>the text will have no choice but to go around the image, flowing around it to the right.</p><p>A value of none ("neither yours nor ours") removes all authority from the clear attribute altogether, and the tag <br>silently wraps the line down.</p><p>There is no default value for the clear attribute of the tag.</p><h2>Tag <br>is a soft transfer</h2><p>The line break tag is very useful for creating the necessary spacing between paragraphs, within which it is used as a soft break, but not as a means of dividing text into paragraphs.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy></p><p>You shouldn't get too carried away with the newline tag for text formatting, because the results aren't always elegant.</p><p>For example, if you use the tag <br>to translate lines within a paragraph, this can cause a "comb" to appear in the user's window if it is smaller than the window the webmaster was targeting.</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 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 ">2022 bar812.ru. Just about the complex. Programs. Iron. Internet. 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>
