Как дать перерыв строки из css, без использования <br/">?

выход:

hello
Как вы

код:

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

Как добиться того же выхода без <br />?

Ответ 1

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

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

HTML:

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

CSS

p span 
{
    display: block;
}

Ответ 2

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

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

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

Ответ 3

Я бы ожидал, что большинство людей, которые находят этот вопрос, хотят использовать 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/

Ответ 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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

p {
    white-space: pre-line;
}

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

Ответ 8

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

display:block;

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

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

Ответ 9

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

p {
    width : 12ex;
}

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

Ответ 10

Список ссылок

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

Ответ 11

Возможно, у кого-то будет такая же проблема, как и я:

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

Ответ 12

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

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

Ответ 13

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

p{
    padding-right: 50%;
}

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

Ответ 14

Значение тега 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: ' ';}
}

Ответ 15

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

источник: fooobar.com/questions/25436/...

Ответ 16

Использование   вместо пробелов предотвратит разрыв.

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

Ответ 17

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

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

Ответ 18

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

Ответ 19

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

clear:both;

Ответ 20

Если это помогает кому-то...

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

<p>This is an <a class="on-new-line">inline link</a>?</p>

С помощью этого css:

a.on-new-line:before { 
  content: '&nbsp;'; 
  font-size:0; 
  display:block;
  line-height:0;
}

Ответ 21

Это работает в Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}