вихід:

Здравствуйте
Як справи

код:

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

Існує кілька варіантів визначення керованості пробілами та розривів ліній. Якщо можна помістити вміст, наприклад, a<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 від цього не потрібно. Технічно це не зовсім абзац, але тег <greeting> немає, тому використовуйте те, що у вас є. Описуючи своє утримання добре 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 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;
 }

Не варто. Якщо ви хочете перервати жорстку лінію, використовуйте її.