Css перенос строки без br

How to line-break from css, without using
?

Note that this won’t work with react because the text is eventually bundled and will be put on the same line, which won’t trigger white-space CSS rule.

Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you .

I suggest using span s that you will then display as blocks (just like a actually).

note also how much additional mark-up there is — the
element exists for a very good reason. If you want the line break because they are separate paragraphs, then simply mark them up as separate paragraphs.

You might need structured lines without actually using paragraphs. To markup a poem, a song or an address for example

@VincentRobert Right, but a poem is the canonical example for when
is the correct markup. Spans for a poem would be “wrong.”

Note that assigning display: block to an element will force a line break before and after, and so is not at all the same as having one line break.

Definitely use the

elements. A element should NOT be made into display:block, the whole point of is that it’s inline. I would do it this way:

. No wonked out CSS required.

Use
as normal, but hide it with display: none when you don’t want it.

I would expect most people finding this question want to use css / responsive design to decide whether or not a line-break appears in a specific place. (and don’t have anything personal against
)

While not immediately obvious, you can actually apply display:none to a
tag to hide it, which enables the use of media queries in tandem with semantic BR tags.

 
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) */ >> 

This is useful in responsive design where you need to force text into two lines at an exact break.

Simon, you are spot on — the example you name is the exact reason I was researching this question and the display: none solution is by far the most appropriate and useful.

Note that for cases where it would cause words to run together, you could use something like display: inline-block; width: 1em; instead of none .

Another «why didn’t I think of this?!» answer.
is great at what it does; no need to reinvent the wheel. Thanks!

@amh15 he doesn’t say WHY he wants to do that. Or rather what is wrong with BR. Is it preformatted text from a weather report web service, or is it a responsive design question. At time of answering all the pre/word wrap answers were already there. You’re right that the details matter but my answer has helped a lot of people that found this question based on keywords so I don’t see why you have to be so nit picky. I’d love to know what he really wanted to do. But I also don’t care.

There are several options for defining the handling of white spaces and line breaks. If one can put the content in e.g. a

tag it is pretty easy to get whatever one wants.

For preserving line breaks but not white spaces use pre-line (not pre ) like in:

If another behavior is wanted choose among one of these (WS=WhiteSpace, LB=LineBreak):

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 */ 

The «\a» command in CSS generates a carriage return. This is CSS, not HTML, so it shall be closer to what you want: no extra markup.

In a blockquote , the example below displays both the title and the source link and separate the two with a carriage return ( «\a» ):

+1 because its CSS only, and doesn’t recommend use of pre, br tags nor changing the display mode to block (which adds different behavior, might break if the parent is in display:flex and therefore is a hack in this context). Its not fancy, really, just a modern technique. If you want the exact same markup, but to actually react differently that’s the way to go.

Brilliant idea. Note the » – do not use simple quotes ‘ because you want to allow the \a to get parsed as a special character.

I would have up-voted this if there was some HTML and maybe a Fiddle to help visualize what you’re doing.

With this CSS every enter inside the P tag will be a break-line at the HTML.

This is exactly what I was looking for! Works perfectly for element content generated from JS (e.g. JSON result from AJAX query, angular-schema-form, etc.) that gets passed through escaping/sanitization (e.g. normal AngularJS escaping behavior when not using ngBindHtml)

Building on what has been said before, this is a pure CSS solution that works.

 span < display: inline; >span:before 
First line of text. Next line. 
 

I just found a variation on this approach to be helpful for multi-line input type=’text’, wrapping the input, and then laying the text over it with a wrapper div . That also requires pointer-events:none;` on the :before in order to still be able to click the button below.

To make an element have a line break afterwards, assign it:

Non-floated elements after a block level element will appear on the next line. Many elements, such as

and are already block level elements so you can just use those.

But while this is good to know, this really depends more on the context of your content. In your example, you would not want to use CSS to force a line break. The
is appropriate because semantically the p tag is the the most appropriate for the text you are displaying. More markup just to hang CSS off it is unnecessary. Technically it’s not exactly a paragraph, but there is no tag, so use what you have. Describing your content well with HTMl is way more important — after you have that then figure out how to make it look pretty.

Источник

HTML как сделать отступ в одну строку без `
`

Как сделать отступ, не используя
? Дело в том что
генерирует символ переноса строки, который выделяется и копируется вместе с текстом, мне же нужно чтобы этого символа не было.

Да что угодно, главное чтобы был отступ шириной в одну строку, который 1. Не выделяется при выборе текста 2. Соответствует ширине строки (т.е. если изменить шрифт, чтобы его ширина соответствовала новому шрифту)

Можно попробовать перехватывать событие копирования и там можете обработать скопированый текст как хотите. developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy

А

делает тоже самое? Я чет не в курсе =) Но да, я бы делал через margin/padding.

5 ответов 5

Попробуйте что-то подобное:

Ничего не изменится, т.к. текста нет

CSS тебе в помощь. margin-bottom: 20px;

А почему Вы не хотите использовать родной тег

? При помощи CSS Вы сможете настроить для него нижний отступ (margin-bottom) по высоте одной строки.

Как можно через margin-bottom задать отступ в одну строку? Именно не в пикселях подогнать, а чтобы если я поставлю другой шрифт/размер шрифта, оступ был верен?

@saroff, В таком случае используйте свойство line-height для этой строки со значением, равным удвоенному размеру текущего текста.

Распишите решение проблемы более детально, чтобы пользователи без проблем могли его понять. Чтобы редактировать ответ, нажмите править.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

white-space

The white-space CSS property sets how white space inside an element is handled.

Try it

The property specifies two things:

Note: To make words break within themselves, use overflow-wrap , word-break , or hyphens instead.

Syntax

/* Single keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* white-space-collapse and text-wrap shorthand values */ white-space: collapse balance; white-space: preserve nowrap; /* Global values */ white-space: inherit; white-space: initial; white-space: revert; white-space: revert-layer; white-space: unset; 

Values

white-space property values can be specified as a single keyword chosen from the list of values below, or two values representing shorthand for the white-space-collapse and text-wrap properties.

Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

Collapses white space as for normal , but suppresses line breaks (text wrapping) within the source.

Sequences of white space are preserved. Lines are only broken at newline characters in the source and at elements.

Sequences of white space are preserved. Lines are broken at newline characters, at , and as necessary to fill line boxes.

Sequences of white space are collapsed. Lines are broken at newline characters, at , and as necessary to fill line boxes.

The behavior is identical to that of pre-wrap , except that:

• Any sequence of preserved white space always takes up space, including at the end of the line.
• A line-breaking opportunity exists after every preserved white space character, including between white space characters.
• Such preserved spaces take up space and do not hang, thus affecting the box’s intrinsic sizes ( min-content size and max-content size).

The following table summarizes the behavior of the various white-space keyword values:

New lines	Spaces and tabs	Text wrapping	End-of-line spaces	End-of-line other space separators
normal	Collapse	Collapse	Wrap	Remove	Hang
nowrap	Collapse	Collapse	No wrap	Remove	Hang
pre	Preserve	Preserve	No wrap	Preserve	No wrap
pre-wrap	Preserve	Preserve	Wrap	Hang	Hang
pre-line	Preserve	Collapse	Wrap	Remove	Hang
break-spaces	Preserve	Preserve	Wrap	Wrap	Wrap

Note: There is a distinction made between spaces and other space separators. These are defined as follows:

Spaces (U+0020), tabs (U+0009), and segment breaks (such as newlines).

All other space separators defined in Unicode, other than those already defined as spaces.

Where white space is said to hang, this can affect the size of the box when measured for intrinsic sizing.

Collapsing of white space

Formal definition

Formal syntax

white-space =
normal |
pre |
nowrap |
pre-wrap |
break-spaces |
pre-line

Examples

Basic example

Line breaks inside elements

In action

div id="css-code" class="box"> p < white-space: select> option>normaloption> option>nowrapoption> option>preoption> option>pre-wrapoption> option>pre-lineoption> option>break-spacesoption> option>preserve nowrapoption> select> > div> div id="results" class="box"> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. p> div> 

.box  width: 300px; padding: 16px; > #css-code  background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; > #css-code select  font-family: inherit; > #results  background-color: rgb(230, 230, 230); overflow-x: scroll; white-space: normal; font-size: 14px; > 

const select = document.querySelector("#css-code select"); const results = document.querySelector("#results p"); select.addEventListener("change", (e) =>  results.setAttribute("style", `white-space: $e.target.value>`); >); 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Источник