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

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

HTML:

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

CSS:

p span 
{
    display: block;
}

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

 p {
  white-space: pre;
 }

<p>hello
How are you</p>

Обратите внимание, что это не работает в IE6 или IE7. Я не знаю о IE8.

Использовать <БР/> как обычно, но скрыть ее с дисплея: нет, когда вы не'т хотите.

Я ожидаю, что большинство людей находят этот вопрос хочу использовать CSS / адаптивный дизайн, чтобы решить, является ли разрыв строки в определенном месте. (и Дон'т имею ничего личного против <БР/>)

Пока не очевидно, вы можете фактически применить дисплей:нет на <БР/> тег, чтобы скрыть, что дает возможность использовать медиа-запросы в тандеме с БР семантические теги.

 <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 {
     white-space: pre-line; /* collapse WS, preserve LB */
   }


<p>hello
How are you</p>

Если другое поведение хотела выбрать одну из этих (РВ=пробелы фунт=разрыв строки):

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

Источник: В3 школах

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

В цитату, пример ниже отображает название и ссылка на источник и разделить с возврата каретки (" и\" Мои):

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

В CSS использовать код

p {
    white-space: pre-line;
}

С помощью этого кода CSS каждый войти внутрь тега p будет разрыв строки на HTML.

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

  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }

<p>
  First line of text. <span>Next line.</span>
</p>

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

в <код>дисплей:блок;</код>

Не плавали элементов после элемента уровня блока, появится на следующей строке. Многие элементы, такие как &ЛТ;п> и &ЛТ;див&ГТ; уже элементы уровня блока, так что вы можете просто использовать те.

Но пока это приятно знать, это действительно больше зависит от контекста вашего контента. В вашем примере, вы не хотите использовать CSS для принудительного разрыва строки. В &ЛТ;БР /&ГТ; поскольку семантически тег p является наиболее подходящим для текста, который вы показываете. Больше разметки просто повесить УСБ от него ненужно. Технически это's не точно такой пункт, но нет &ЛТ;приветствие&ГТ; тег, так что используйте то, что имеете. Описывая свой контент с HTML-это способ более важным - после того, как вы что тогда выяснить, как сделать его выглядеть красиво.

Здесь'ы плохие решения для плохой вопрос, но одно, что буквально отвечает кратко:

p {
    width : 12ex;
}

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

Для получения списка ссылок

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

Здесь'ы например, если содержание:

    .toc a:after{ content: "\a"; white-space: pre; }


<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'ы метод, который является более простым и более совместимые. Это не'т отдельный стиль и содержание столько, требует больше кода, и могут быть случаи, когда вы хотите добавить после того. Еще отличное решение, особенно для старых ИЕ.

    .toc br{ display: none; } /* comment out for horizontal links */


<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, выход такой же (и до)
• Никаких дополнительных полей добавляется к элементам (см. NickG'дисплей с`: блок комментарии)
• Вы можете легко переключаться между горизонтальной и вертикальной списки ссылок с некоторых общих в CSS не заходя в каждый HTML-файл для изменить стиль
• Нет поплавок или понятно стили влияния окружающей контента
• Стиль-это отдельная от содержания (и <БР/>, или пред с жестко ломает)
• Это также может работать на свободные связи через а.оглавление:послеи в<класс=то"оглавление" и>`
• Вы можете добавить несколько перерывов и даже префикс/суффикс текста

Может, кто-то будет иметь тот же вопрос, что и я:

Я был в элементе с дисплей: флекс, поэтому мне пришлось использовать флекс-направление: колонка.

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

HTML-код:

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

Усс:

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

Как насчет в`<предварительно> тег?

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

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

p{
    padding-right: 50%;
}

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

Нужно объявить контент в в<промежуток класс="в имя_класса" и></службы>. После этого строка будет перерыв.

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

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

С помощью `&ампер;усилитель; nbsp; вместо пробелов помешает перерыв.

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

Использовать переполнение-обертывание: брейк-слова; как :

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

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

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

и CSS

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

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

HTML-код:

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

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

Усс:

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

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