вывод:
<p>hello <br> How are you </p>
код:
<p>Привет <br> Как дела </p>
Как добиться того же результата без <br>
?
Невозможно использовать одну и ту же HTML-структуру, вы должны как-то различать Hello
и How are you
.
Я предлагаю использовать span
, которые затем будут отображаться в виде блоков (как и <div>
на самом деле).
HTML:
<p><span>hello</span><span>How are you</span></p>
CSS:
p span
{
display: block;
}
Вы можете использовать white-space: pre;
, чтобы элементы вели себя как <pre>
, которые сохраняют новые строки. Пример:
<style>
p {
white-space: pre;
}
</style>
<p>hello
How are you</p>
Обратите внимание, что это не работает в IE6 или IE7. Я не знаю о IE8.
<БР/>
как обычно, но скрыть ее с дисплея: нет, когда вы не'т хотите.Я ожидаю, что большинство людей находят этот вопрос хочу использовать CSS / адаптивный дизайн, чтобы решить, является ли разрыв строки в определенном месте. (и Дон'т имею ничего личного против <БР/>
)
Пока не очевидно, вы можете фактически применить дисплей:нет
на <БР/>
тег, чтобы скрыть, что дает возможность использовать медиа-запросы в тандеме с БР семантические теги.
<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)
}
}
Это полезно для адаптивного дизайна, где вам нужно текст в две строки на точное перерыв.
Есть несколько вариантов для определения обработки пробелы и переносы строк.
Если можно поместить содержимое, например <п>
пятнашки это довольно легко, чтобы получить то, что хочется.
Для сохраняя разрывы строк, но не пробелы использование пре-линия
(не до
), как в:
<style>
p {
white-space: pre-line; /* collapse WS, preserve LB */
}
</style>
<p>hello
How are you</p>
Если другое поведение хотела выбрать одну из этих (РВ=пробелы фунт=разрыв строки):
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 */
В " и\" Мои команды в CSS генерирует возврата каретки. Это на CSS, а не HTML, так будет ближе к тому, что вы хотите: без дополнительной разметки.
В цитату, пример ниже отображает название и ссылка на источник и разделить с возврата каретки (" и\" Мои
):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
В CSS использовать код
p {
white-space: pre-line;
}
С помощью этого кода CSS каждый войти внутрь тега p будет разрыв строки на HTML.
Опираясь на то, что было сказано раньше, это чистый раствор CSS, который работает.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
<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> <-----------------------------------
Чтобы сделать элемент разрыва строки после этого, назначить ему:
в <код>дисплей:блок;</код>
Не плавали элементов после элемента уровня блока, появится на следующей строке. Многие элементы, такие как &ЛТ;п> и &ЛТ;див&ГТ; уже элементы уровня блока, так что вы можете просто использовать те.
Но пока это приятно знать, это действительно больше зависит от контекста вашего контента. В вашем примере, вы не хотите использовать CSS для принудительного разрыва строки. В &ЛТ;БР /&ГТ; поскольку семантически тег p является наиболее подходящим для текста, который вы показываете. Больше разметки просто повесить УСБ от него ненужно. Технически это's не точно такой пункт, но нет &ЛТ;приветствие&ГТ; тег, так что используйте то, что имеете. Описывая свой контент с HTML-это способ более важным - после того, как вы что тогда выяснить, как сделать его выглядеть красиво.
Других ответов представить несколько хороших способов добавления переносов строк, в зависимости от ситуации. Но следует отметить, что после
селектор является одним из лучших способов сделать это для УСБ контроль за списки ссылок (и подобные вещи), по причинам, отмеченным ниже.
Здесь'ы например, если содержание:
<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'ы метод, который является более простым и более совместимые. Это не'т отдельный стиль и содержание столько, требует больше кода, и могут быть случаи, когда вы хотите добавить после того. Еще отличное решение, особенно для старых ИЕ.
<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>
Обратите внимание на преимущества указанного выше решения:
до
)поплавок
или понятно
стили влияния окружающей контента<БР/>
, или пред
с жестко ломает)и в
<класс=то"оглавление" и>`Установка БР
тег к display: none
не полезно, но тогда вы можете в конечном итоге с WordsRunTogether. Я'вэ нашел его более полезным вместо того, чтобы заменить его пробелом, вот так:
HTML-код:
<h1>
Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>
Усс:
@media (min-device-width: 1281px){
h1 br {content: ' ';}
h1 br:after {content: ' ';}
}
Как насчет в`<предварительно> тег?
Вы можете добавить много обивка и текст должен быть разделен на новую строку, например
p{
padding-right: 50%;
}
Работал штрафа для меня в ситуации с адаптивным дизайном, где только в определенном диапазоне ширины он был нужен для текста должны быть разделены.
Нужно объявить контент в в<промежуток класс="в имя_класса" и></службы>
. После этого строка будет перерыв.
\A
означает символ перевода строки.
.class_name::after {
content: "\A";
white-space: pre;
}
Я'м предполагаю, что вы не хотите использовать точки останова, потому что он всегда будет ломать линию. Это правильно? Если да, то как насчет добавления точки останова <БР /> в текст, а затем давая ему класса, как
<БР класс="и hidebreak-то"/>затем с помощью медиа-запросов прямо над размером вы хотите его сломать, чтобы скрыть
<БР /> так он ломается при определенной ширине, но остается встроенный выше, что ширина.
HTML-код:
<p>
The below line breaks at 766px.
</p>
<p>
This is the line of text<br class="hidebreak"> I want to break.
</p>
Усс:
@media (min-width: 767px) {
br.hidebreak {display:none;}
}