Невозможно с той же структурой 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) */
  }
}

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

пример jsfiddle

Есть несколько вариантов определения обработки пробелов и разрывов строк. Если можно поместить контент, например, с помощью тега <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

Команда "\ 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>

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

display:block;

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

Но хотя это полезно знать, на самом деле это больше зависит от контекста вашего контента. В вашем примере вы не захотите использовать CSS для принудительного разрыва строки. ‹Br /› подходит, потому что семантически тег p является наиболее подходящим для отображаемого текста. Больше разметки просто для того, чтобы повесить CSS, не нужно. Технически это не точно абзац, но тег ‹greeting› отсутствует, так что используйте то, что у вас есть. Хорошее описание вашего контента с помощью HTMl гораздо важнее - после того, как вы это сделаете, затем выясните, как сделать его красивым.

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

OR

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

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

Вот плохое решение плохого вопроса, но оно буквально соответствует брифу:

p {
    width : 12ex;
}

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

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

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

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

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

Установка тега 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: ' ';}
}

Используйте overflow-wrap: break-word; нравиться :

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

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

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

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

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

и css

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

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

p{
    padding-right: 50%;
}

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

Вам необходимо объявить содержимое в <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;
 }