вывод:

Привет
Как ты

код:

<p>hello <br> How are you </p>

Как добиться такого же выхода без <br>?

Невозможно с той же HTML структурой, вы должны иметь что - то различать Helloи How are you.

Я предлагаю использовать spans, которые затем будут отображаться в виде блоков (как на <div>самом деле).

p span {
  display: block;
}

<p><span>hello</span><span>How are you</span></p>

Вы можете использовать, white-space: pre;чтобы заставить элементы действовать как <pre>, что сохраняет новые строки. Пример:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Обратите внимание на IE, что это работает только в IE8 +.

Используйте <br/>как обычно, но скрывайте, display: noneкогда вы этого не хотите.

Я ожидал бы, что большинство людей, находящих этот вопрос, захотят использовать css / отзывчивый дизайн, чтобы решить, появляется ли разрыв строки в определенном месте. (и не имею ничего личного против <br/>)

Хотя это и неочевидно, на самом деле вы можете обратиться display:noneк <br/>тегу, чтобы скрыть его, что позволяет использовать медиа-запросы в тандеме с семантическими тегами BR.

 <div>
   The quick brown fox<br />
   jumps over the lazy dog
 </div>

 @media screen and (min-width: 20em) 
 {
    br 
    { 
       display: none;   // hide the BR tag for wider screens (i.e. disable the line break)
    }
 }

Это полезно в адаптивном дизайне, где вам нужно поместить текст в две строки с точным разрывом.

http://jsfiddle.net/nNbD3/1/

Есть несколько опций для определения обработки пробелов и разрывов строк. Если можно поместить контент, например, в <p>тег, довольно легко получить то, что он хочет.

Для сохранения разрывов строк, но не пробелов, используйте pre-line(не pre) как в:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Если требуется другое поведение, выберите один из них (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 */

ИСТОЧНИК: W3 Schools

Команда "\ a" в CSS генерирует возврат каретки. Это CSS, а не HTML, поэтому он должен быть ближе к тому, что вы хотите: никакой дополнительной разметки .

В блок-цитате приведенный ниже пример отображает заголовок и ссылку на источник и разделяет их с помощью возврата каретки ( "\a"):

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}

При CSS используйте код

p {
    white-space: pre-line;
}

С этим кодом css каждый ввод в теге P будет линией разрыва в html.

Основываясь на сказанном ранее, это чистое решение CSS, которое работает.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

ИЛИ

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

источник: https://stackoverflow.com/a/36191199/2377343

Чтобы у элемента впоследствии был разрыв строки, назначьте его:

display:block;

Неперемещенные элементы после элемента уровня блока появятся на следующей строке. Многие элементы, такие как <p> и <div>, уже являются элементами блочного уровня, так что вы можете просто использовать их.

Но хотя это полезно знать, это действительно больше зависит от контекста вашего контента. В вашем примере вы не хотели бы использовать CSS для принудительного переноса строки. <br /> подходит, потому что семантически тег p является наиболее подходящим для отображаемого текста. Больше разметки, чтобы просто повесить CSS, не нужно. Технически это не совсем абзац, но тега <welcome> нет, поэтому используйте то, что у вас есть. Описывая свое содержание хорошо Html путь более важно - после того, как у вас есть что то выяснить , как заставить это выглядеть красиво.

Вот плохое решение плохого вопроса, но тот, который буквально встречает краткое изложение:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

Для списка ссылок

Другие ответы предоставляют несколько хороших способов добавления разрывов строк в зависимости от ситуации. Но следует отметить, что :afterселектор является одним из лучших способов сделать это для контроля CSS над списками ссылок. (и аналогичными вещами) по причинам, указанным ниже.

Вот пример, предполагающий оглавление:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

А вот техника Simon_Weaver, которая проще и более совместима. Он не так сильно разделяет стиль и контент, требует больше кода, и могут быть случаи, когда вы хотите добавить разрывы по факту. Тем не менее, отличное решение, особенно для старых IE.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Обратите внимание на преимущества вышеуказанных решений:

• Независимо от пробела в HTML, вывод одинаков ( pre )
• Никаких дополнительных отступов не добавляется к элементам (см. NickG's display:block Комментарии )
• Вы можете легко переключаться между горизонтальным и вертикальным списками ссылок с помощью некоторого общего CSS, не заходя в каждый HTML-файл для изменения стиля
• Нет floatили clearстили, влияющие на окружающий контент
• Стиль отделен от контента (против <br/>или preс жестко закодированными перерывами)
• Это также может работать для свободных ссылок, используя a.toc:afterи<a class="toc">
• Вы можете добавить несколько разрывов и даже текст префикса / суффикса

Может быть, у кого-то будет такая же проблема, как и у меня:

Я был в элементе, display: flexпоэтому мне пришлось использовать flex-direction: column.

Установка brтега вdisplay: none это полезно, но тогда вы можете в конечном итоге с WordsRunTogether. Я нашел более полезным вместо этого заменить его пробелом, например, так:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

Как насчет <pre>тега?

источник: http://www.w3schools.com/tags/tag_pre.asp

Вы можете добавить много отступов и принудительно разделить текст, например, на новую строку

p{
    padding-right: 50%;
}

Для меня это хорошо работало в ситуации с адаптивным дизайном, когда только в пределах определенного диапазона ширины это было необходимо для разделения текста.

Мне нравятся очень простые решения, вот еще один

<p>hello <span>How are you</span></p>

и CSS

p {
 display: flex;
 flex-direction: column;
}

Используйте overflow-wrap: break-word; подобно :

.yourelement{
overflow-wrap: break-word;
}

Вы должны объявить содержание внутри <span class="class_name"></span>. После этого линия будет прервана.

\A означает символ перевода строки.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Ответы Винсента Роберта и Джои Адамса действительны. Если вы не хотите, однако, изменить разметку, вы можете просто вставить<br /> использующий javascript.

В CSS нет способа сделать это без изменения разметки.

В моем случае мне нужна была кнопка ввода, чтобы перед ней был разрыв строки.
Я применил следующий стиль к кнопке, и она сработала:

clear:both;

В случае, если это помогает кому-то ...

Вы могли бы сделать это:

<p>This is an <a class="on-new-line">inline link</a>?</p>

С этим CSS:

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

Использование  вместо пробелов предотвратит разрыв.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Это работает в Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Я предполагаю, что вы не хотели использовать точку останова, потому что она всегда ломает линию. Это верно? Если да, то как насчет добавления точки останова <br />в ваш текст, а затем присвоения ему класса, подобного <br class="hidebreak"/>тому, используя медиазапрос прямо над размером, который вы хотите разбить, чтобы скрыть<br /> чтобы он на определенной ширине, но оставался встроенным выше этой ширины.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

Код может быть

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS будет

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

Не. Если вы хотите жесткий разрыв строки, используйте один.