выход:
hello
Как вы
код:
<p>hello <br /> How are you </p>
Как добиться того же выхода без <br />
?
выход:
hello
Как вы
код:
<p>hello <br /> How are you </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/отзывчивый дизайн, чтобы диктовать, появляется ли перерыв линии в определенном месте. (и не имеют ничего личного против <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)
}
}
Это полезно в гибкой конструкции, где вам необходимо принудительно форматировать текст на две строки.
Существует несколько вариантов определения обработки пробелов и разрывов строк.
Если можно разместить содержимое, например. тег <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 */
Команда "\ a" в CSS генерирует возврат каретки. Это CSS, а не HTML, поэтому он должен быть ближе к тому, что вы хотите: никакой дополнительной разметки.
В блочном кадре пример ниже отображает как заголовок, так и исходную ссылку и разделяет их с возвратом каретки ("\a"
):
blockquote[title][cite]:after {
content:attr(title)"\a"attr(cite)
}
Основываясь на сказанном ранее, это чистое решение CSS, которое работает.
<style>
span {
display: inline;
}
span:before {
content: "\a ";
white-space: pre;
}
</style>
<p>
First line of text. <span>Next line.</span>
</p>
В CSS используйте код
p {
white-space: pre-line;
}
С этим кодом css каждый вход внутри тега P будет линией прерывания в html.
Чтобы сделать элемент, у которого есть разрыв строки, назначьте его:
display:block;
Неплавающие элементы после того, как элемент уровня блока появится на следующей строке. Многие элементы, такие как <p> и <div> уже являются элементами уровня блока, поэтому вы можете просто использовать их.
Но, хотя это хорошо знать, это действительно больше зависит от контекста вашего контента. В вашем примере вы не захотите использовать CSS для принудительного разрыва строки. < br/ > является подходящим, поскольку семантически тег p является наиболее подходящим для текста, который вы показываете. Больше разметки просто для того, чтобы отбросить CSS, это не нужно. Технически это не совсем абзац, но не существует < приветствие > тег, поэтому используйте то, что у вас есть. Описывание вашего контента с помощью HTMl гораздо важнее - после этого вы узнаете, как сделать его красивым.
Здесь плохое решение плохого вопроса, но которое буквально соответствует краткому:
p {
width : 12ex;
}
p:before {
content: ".";
float: right;
padding-left: 6ex;
visibility: hidden;
}
Другие ответы дают некоторые хорошие способы добавления разрывов строк, в зависимости от ситуации. Но следует отметить, что селектор :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>
Обратите внимание на преимущества вышеупомянутых решений:
pre
)display:block
)float
или clear
стилей, влияющих на окружающий контент<br/>
или pre
с жестко запрограммированными перерывами)a.toc:after
и <a class="toc">
Возможно, у кого-то будет такая же проблема, как и я:
Я был в элементе с display: flex
, поэтому мне пришлось использовать flex-direction: column
.
Как насчет тега <pre>
?
Вы можете добавить много дополнений и форматировать текст для разделения на новую строку, например
p{
padding-right: 50%;
}
Работал отлично для меня в ситуации с отзывчивым дизайном, где только в пределах определенного диапазона ширины он был необходим для разделения текста.
Значение тега 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: ' ';}
}
<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/...
Использование
вместо пробелов предотвратит разрыв.
<span>I DONT WANT TO BREAK THIS LINE UP, but this text can be on any line.</span>
Ответы Винсента Роберта и Джои Адамса действительны. Если вы не хотите, однако, изменить разметку, вы можете просто вставить <br />
с помощью javascript.
В CSS нет способа сделать это без изменения разметки.
не делать. Если вам нужен жесткий разрыв строки, используйте его.
В моем случае мне понадобилась кнопка ввода для прерывания строки. Я применил следующий стиль к кнопке, и он работал:
clear:both;
Если это помогает кому-то...
Вы можете сделать это:
<p>This is an <a class="on-new-line">inline link</a>?</p>
С помощью этого css:
a.on-new-line:before {
content: ' ';
font-size:0;
display:block;
line-height:0;
}
Это работает в Chrome:
p::after {
content: "-";
color: transparent;
display: block;
}