Как вставить разрыв строки перед элементом с помощью CSS

170

Мне кажется, что я нашел способ, используя свойство содержимого CSS, вставить тег разрыва строки перед элементом. Очевидно, это не работает:

#restart:before { content: '<br/>'; }

Но как ты это делаешь?

css

— mheavers
источник

2

CSS не для добавления или редактирования контента, а для управления отображением контента.

— Тодд Моисей

40

Мне кажется, что компоновка и поток (можно рассматривать и разрывы строк) определенно находятся в области CSS.

— Тревор

12

CSS абсолютно подходит для добавления или редактирования контента, когда он является единым стилевым элементом, который является частью вашей темы. Особенно с системами управления контентом, такими как Wordpress, которые не позволяют редактировать ваш контент, это очень полезно. Вот почему свойство "content" существует. Для добавления и / или редактирования контента.

— Фэй Лорен

266

Это возможно с помощью \A escape-последовательности в сгенерированном контентом psuedo-element. Подробнее читайте в спецификации CSS2.

#restart:before { content: '\A'; }

Вам также может понадобиться добавить white-space:pre;в #restart.

примечание: \Aобозначает конец строки.

ps Еще одна процедура, которая будет

:before { content: ' '; display: block; }

— bookcasey
источник

11

Также попробуйте пробел: предварительная упаковка; если вы хотите, чтобы ваш текст обернуть.

— Джаззи

6

Brilliant. Следует отметить, однако, что для того, чтобы это работало - #restartдолжно бытьdisplay: inline;

— Трой Алфорд

23

Это не сработало для меня, я использовал :before { content: ' '; display: block; }вместо этого.

— Богданио

1

По некоторым причинам ни одно из решений не работает с inline-blockэлементами. Они просто не пойдут на следующую строку. Единственным выходом было добавить пустую строку <div></div>в HTML.

— Адам Рейс

2

Если строка не прервалась, вы можете использовать свойство «пробел»: before {content: '\ A'; пустое пространство: pre; }

— Amr

35

Если #restartэто встроенный элемент (например <span>, и <em>т. Д.), То вы можете превратить его в блочный элемент, используя:

#restart { display: block; }

Это обеспечит разрыв строки как до, так и после элемента.

Не существует способа, чтобы CSS вставлял что-то, что действует как разрыв строки только перед элементом, а не после. Возможно, вы могли бы вызвать разрыв строки до, как побочный эффект других изменений, например float: left, или clear: leftпосле плавающего элемента, или даже чего-то сумасшедшего, #restart:before { content: 'a load of non-breaking spaces'; }но это, вероятно, не очень хорошая идея в общем случае.

— bobince
источник

1

Это не может быть display: block - потому что тогда мне нужно будет отобразить ширину элемента, чтобы его фон не проходил по всей странице. Это должно быть в состоянии автоматически установить ширину для элемента.

— mheavers

3

float: leftЭлемент может быть полезна, так как они сжимаются к приступу и начать новую строку. В противном случае то, что вы хотите, может оказаться невозможным.

— Бобинц

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

— эйрдакул

19

Это работает для меня:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

— hutorny
источник

По какой-то причине различные символы Юникода для новой строки не работали для меня ..? Это решение помогло - спасибо!

— Джин Бо

1

Да, но что происходит, когда вам нужно поместить текст в контент тоже !? ответ

— Шандор Зуболы

12

Просто поместите символ перевода строки в юникоде внутри псевдоэлемента before:

#restart:before { content: '\00000A'; }

— Джесси Кинсман
источник

11

Следующий CSS работал для меня:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

— rluks
источник

Отличная идея с простым CSS

— NaveenDA

Работал как брелок для меня. Я использую это:content: 'bar: \a' attr(data-description);

— Джимми Адаро

Это правильный ответ 👍

— cronoklee

10

Есть две причины, по которым вы не можете добавлять сгенерированный контент через CSS так, как вам хочется:

сгенерированный контент принимает контент, а не разметку. Разметка не будет оцениваться, а будет отображаться только.
:beforeи :afterсгенерированный контент добавляется внутри элемента, поэтому даже добавление пробела или буквы и определение его как blockне будет работать.

Существует ::outsideпсевдоэлемент, который может делать то, что вы хотите. Тем не менее, похоже, нет поддержки браузера. (Подробнее читайте здесь: http://www.w3.org/TR/css3-content/#wrapping )

Лучше всего использовать JQuery здесь:

$('<br />').insertBefore('#restart');

Пример: http://jsfiddle.net/jasongennaro/sJGH9/1/

— Джейсон Дженнаро
источник

«Использование CSS». Я нашел ответ, похожий на работу Джесси Кинсмана.

— RonnyKnoxville

4

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

Вот HTML-код:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Вот CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Вот скрипка: http://jsfiddle.net/AprNY/

— hammerbrostime
источник

+1 За творчество. У меня есть кое-что, что я включаю из внешнего источника и не могу изменить фактический HTML ... это работает нормально :) Спасибо!

— противодействие

3

Попробуйте следующее:

#restart::before {
  content: '';
  display: block;
}

— пользователь
источник

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

— Дедупликатор

1

при условии, что вы хотите, чтобы высота линии была 20 пикселей

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

— Карима
источник

1

Мне совсем не повезло, вставив разрыв с: before. Мое решение состояло в том, чтобы добавить промежуток с классом и поместить разрыв в промежуток. Затем измените класс для отображения: нет; или отобразить: заблокировать при необходимости.

HTML

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

CSS

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

Надеюсь это поможет.

— Роджер
источник

1

Вы можете заполнить свой документ <br>тегами и включить / выключить их с помощью css, как и любые другие:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

— пневмоперфоратор
источник

0

Вы также можете использовать предварительно закодированный объект HTML для разрыва строки 
в вашем контенте, и он будет иметь тот же эффект.

— Генри Гибсон
источник

0

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 Content Proerty, "newlines" ... p не будет добавлять поля или отступы в конце p внутри родительского блока (например, body ›section› п). "\ A" разрыв строки приводит к пробелу строки, эквивалентному стилизованной высоте строки.

— Марк Стюарт
источник

-1

Добавить margin-top:20px;к #restart. Или любой другой размер, который вы считаете подходящим. Если это встроенный элемент, который вам нужно добавить, display:blockили display:inline-blockхотя я не думаю, что он inline-blockработает на более старых версиях IE.

— punkrockbuddyholly
источник

Нет, проблема в том, что тип отображения элемента - inline-block, поэтому мне нужно сделать разрыв перед элементом.

— Mheavers

тип отображения уже inline-block. Я пытаюсь сделать то, что я спросил выше, используя свойство содержимого.

— mheavers

Вы не можете добавлять html-элементы, используя свойство content, это невозможно.

— punkrockbuddyholly

потому что ваш ответ не решил бы его проблему. Посмотрите на победивший ответ, в котором подробно описан способ обеспечить разрыв строки с помощью свойства content (который не принимает элементы html). Возможно, это было неправильное понимание исходного вопроса.

— pdwalker

-1

Вместо того, чтобы как-то вручную добавлять разрыв строки, вы можете сделать реализацию, border-bottom: 1px solid #ff0000которая будет принимать границу элемента и отображать только border-<side>ту сторону, которую вы укажете.

— andy4thehuynh
источник

2

ОП попросил равнозначно <br>, а не <hr>.

— Бени Чернявский-Паскин