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

398

вывод:

Привет
Как ты

код:

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

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

Джитендра Вьяс
источник

Ответы:

385

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

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

p span {
  display: block;
}
<p><span>hello</span><span>How are you</span></p>

Винсент Роберт
источник
37
обратите внимание также на то, сколько существует дополнительной наценки - <br />элемент существует по очень веской причине. Если вы хотите разрыв строки, потому что они являются отдельными абзацами, просто пометьте их как отдельные абзацы.
Роуланд Шоу
8
Вам могут понадобиться структурированные строки без использования абзацев. Например, для разметки стихотворения, песни или адреса
Винсент Роберт,
2
@VincentRobert Правильно, но стихотворение является каноническим примером того, когда <br>правильная разметка. Пролеты для стихотворения были бы «неправильными».
Алан Х.
8
Обратите внимание, что присвоение display: block элементу приведет к разрыву строки до и после, и это совсем не то же самое, что иметь один разрыв строки.
Джерси
17
Обязательно используйте элементы <p>. Элемент <span> НЕ ДОЛЖЕН быть превращен в display: block, суть <span> в том, что он встроен. Я бы сделал это следующим образом: <div> <p> привет </ p> <p> Как дела </ p> </ div>. Выигрышный CSS не требуется.
Майлз
354

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

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

Обратите внимание на IE, что это работает только в IE8 +.

Джои Адамс
источник
133
часто лучше, чем preесть pre-line, что позволяет упаковывать.
Алан Х.
14
Подробнее о различиях между предварительной линией и предварительной упаковкой на developer.mozilla.org/en-US/docs/Web/CSS/white-space
Патрик
1
Я предпочел pre в моем случае, потому что я также могу использовать переполнение текста
Грег
Обратите внимание, что это не будет работать с реагировать, потому что текст в конечном итоге будет упакован и будет помещен в одну строку, что не вызовет white-spaceправило CSS.
Vadorequest
119

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

Simon_Weaver
источник
5
Саймон, вы на месте - пример, который вы назвали, является точной причиной, по которой я исследовал этот вопрос, и display: noneрешение на данный момент является наиболее подходящим и полезным.
abbottjam
8
Обратите внимание, что в тех случаях, когда это приводит к объединению слов, вы можете использовать что-то вроде display: inline-block; width: 1em;вместо none.
Beejor
2
Вы даже можете применить класс к, <br class='foo'>если вам нужно больше контроля, но не сходите с ума!
Simon_Weaver
Еще одно "почему я не подумал об этом ?!" ответ. <br/>великолепен в том, что делает; Не нужно изобретать велосипед. Спасибо!
Риного
Аналогичная концепция может быть применена к макету flex-box: stackoverflow.com/questions/29732575/…
Simon_Weaver
106

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

petermeissner
источник
4
идеально. должен быть выбранный ответ.
Бен Лин
1
Я считаю, что это то, что ищет OP.
Джон Сардинья
65

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

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

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}
Дэвид Латапи
источник
Причудливый, но совершенно ненужный для вопроса.
YePhIcK
15
+1, потому что это только CSS, и он не рекомендует использовать теги pre, br и не менять режим отображения для блокировки (что добавляет другое поведение, может сломаться, если родительский display:flexобъект включен и, следовательно, является хаком в этом контексте). На самом деле это не модно, просто современная техника. Если вы хотите точно такую ​​же разметку, но на самом деле реагируете по-другому, это путь.
Renoirb
Великолепная идея. Обратите внимание на "- не используйте простые кавычки, 'потому что вы хотите разрешить \aсинтаксический анализ в качестве специального символа.
Хафенкранич
2
Я хочу дать +1, но это не работает для меня на Chrome 55
Pery Mimon
4
Я бы проголосовал за это, если бы был какой-то HTML и, возможно, Fiddle, чтобы помочь визуализировать то, что вы делаете.
Джон
29

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

p {
    white-space: pre-line;
}

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

burunoh
источник
1
Это именно то, что я искал! Прекрасно работает с содержимым элемента, сгенерированным из JS (например, результат JSON из запроса AJAX, форма angular-schema и т. Д.), Который проходит через экранирование / санитарную обработку (например, нормальное поведение экранирования AngularJS, когда не используется ngBindHtml)
Стефан Драгнев,
28

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

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>
cruzanmo
источник
Я только что нашел вариант этого подхода, который будет полезен для многострочных событий указателя input type='text', wrapping the input, and then laying the text over it with a wrapper div . That also requires : none; ` :beforeдля того, чтобы все еще иметь возможность нажимать кнопку ниже.
Эрик Лиз
10
<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

T.Todua
источник
9

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

display:block;

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

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

Ошибка синтаксиса
источник
1
Но это делает его полной шириной контейнера, что может быть нежелательным побочным эффектом (особенно, если элемент является якорем / ссылкой).
NickG
Да, по умолчанию элементы уровня блока занимают всю ширину, если вы не установите ширину. Прочитайте мой абзац о контексте - думая в терминах семантического контекста, а не выбирая html, основанный на вашем дизайне, как правило, помогает избежать подобных проблем.
Синтаксическая ошибка
1
Часто причина, по которой теги <br> следует избегать, является скорее технической, чем семантической. Теги <br> являются автономными, и вы не обязательно можете их использовать, поскольку не знаете, будут ли существовать элементы перед ними во время рендеринга страницы, поэтому вам могут не понадобиться пустые строки. Рассмотрим список <a> ссылок в вертикальном меню, где вы хотите, чтобы они все были в отдельной строке, но вы не можете использовать <br>, поскольку вы не знаете, какие ссылки будут скрыты из-за правил на стороне сервера. Скрытие ссылок приведет к появлению пустых строк, если использовать <br>.
Ник
1
По этой причине люди часто используют список <ul>, а затем прячут маркеры, но это довольно глупо. Было бы лучше, если бы существовало правило css, которое просто гласило «всегда рендеринг по собственной линии».
Ник
1
Но, как я уже сказал в своем первом комментарии, это приводит к нежелательному побочному эффекту, когда элементы имеют полную ширину :) Мне просто нужны элементы в новой строке, без их полной ширины. Если элемент является ссылкой в ​​крайнем левом углу страницы, это означает, что даже щелчки в правом нижнем углу экрана переходят по ссылке.
Ник
8

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

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}
Дэнни Беккет
источник
1
опечатка или что должно exбыть? pи eне так близко к клавиатуре, поэтому я спрашиваю
MMachinegun
1
Плохо или нет, это на самом деле довольно умно.
Джонатан Думайн
5

Для списка ссылок

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

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

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

Дориан
источник
4

Установка 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: ' ';}
}
Bryan
источник
2
Вы могли бы также рассмотреть вопрос о создании brв display: inline-block; width: 1em;котором должны мешать слова от работы вместе, идя по горизонтали.
Beejor
1
Мне больше нравится ваше предложение. Я попробую это в следующий раз, когда столкнусь с этим.
Брайан
3

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

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

Stephan
источник
Ой! Я понимаю что ты имеешь ввиду. Затем вы используете пробелы в вашем, <pre>так что это ломает черту. Что делать, если вы хотите иметь регулярные пробелы?
Миха Мазахери
Предварительный тег будет интерпретировать возврат каретки, выполненный в течение. Так что если вы прервете грань между «привет» и «как дела» в предварительном теге, разрыв будет визуализирован
Godineau Félicie
2

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

p{
    padding-right: 50%;
}

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

Alexxandar
источник
1
Звучит неплохо, но увеличение отступов также увеличит общую ширину объекта. И это может иметь отрицательный эффект, особенно в случае адаптивной страницы.
itols
1

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

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

и CSS

p {
 display: flex;
 flex-direction: column;
}
Ярек
источник
1

Используйте overflow-wrap: break-word; подобно :

.yourelement{
overflow-wrap: break-word;
}
Ден Пэт
источник
1

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

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

.class_name::after {
  content: "\A";
  white-space: pre;
}
Яцек Кравчик
источник
0

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

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

е-удовлетворяться
источник
Это не точно. Можно использовать :afterили :beforeсделать это.
Артур Бодера
0

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

clear:both;
Джин Бо
источник
0

В случае, если это помогает кому-то ...

Вы могли бы сделать это:

<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;
}
сойка
источник
или.on-new-line:before {content: ""; display: block;}
meuwka
0

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

<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>
JPB
источник
0

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

p::after {
    content: "-";
    color: transparent;
    display: block;
}
Энди Гига
источник
0

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

Krankit
источник
Я только заметил, что Simon_Weaver опубликовал ответ, похожий на мой. Извините, Саймон, не пытался проклясть ваш ответ. Я не прочитал все ответы до того, как опубликовал свои, и поэтому не заметил ваших. Мой плохой ... извлеченный урок .. Я прочитаю другие ответы, прежде чем публиковать свои в будущем.
Кранкит
Не беспокойся! Но ты должен написать мне стихотворение. От w3schools.com/tags/tag_br.asp "Tip: The <br> tag is useful for writing addresses or poems."
Simon_Weaver
0

Код может быть

<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;
 }
сумасшедший
источник
-1

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

Рич Брэдшоу
источник
3
+1 Да, но если новая строка предназначена исключительно для презентации display: block;.
Web_Designer
21
Я не понимаю, почему этот ответ получил какие-либо голоса. Если бы у меня была возможность использовать разрыв строки, я бы не стал смотреть на этот вопрос.
trliner