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

Question

Выход:

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

Код:

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

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

Answer 1

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

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

Answer 2

Установка тега 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: ' ';}
}

Answer 3

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

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

Answer 4

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

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

Answer 5

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

p{
    padding-right: 50%;
}

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

Answer 6

Использовать overflow-wrap: break-word; как:

.yourelement{
overflow-wrap: break-word;
}

Answer 7

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

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

Answer 8

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

Answer 9

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

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

и css

p {
 display: flex;
 flex-direction: column;
}

Answer 10

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

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