Как переводить строки из CSS, не используя <br />?

Question

Выход:

привет
Как дела

Код:

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

Как добиться того же результата без <br>?

Answer 1

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

clear:both;

Answer 2

Полагаю, вы не хотели использовать точку останова, потому что она всегда ломает линию. Это верно? Если да, то как насчет добавления точки останова <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/

Answer 3

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

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

Answer 4

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

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

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

Answer 5

Если это кому-нибудь поможет ...

Вы можете сделать это:

<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;
}