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

Question

Выход:

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

Код:

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

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

Answer 1

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

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

HTML:

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

CSS:

p span 
{
    display: block;
}

Answer 2

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

<style>
 p {
  white-space: pre;
 }
</style>
<p>hello
How are you</p>

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

Answer 3

Используйте <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/

Answer 4

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

Answer 5

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

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

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

Answer 6

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

p {
    white-space: pre-line;
}

С этим кодом css каждая запись в теге P будет прерываться на html.

Answer 7

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

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

Answer 8

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

display:block;

Неперемещенные элементы после элемента уровня блока появятся на следующей строке. Многие элементы, такие как

и

, уже являются элементами блочного уровня, поэтому вы можете просто использовать их.

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

Answer 9

<code><pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum

OR

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

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

Answer 10

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

p {
    width : 12ex;
}

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