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

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

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

Но как вы это делаете?

ОТВЕТЫ

Ответ 1

Возможно, с помощью \A escape-последовательности в созданном psuedo-элементе содержимом. Подробнее в спецификации CSS2.

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

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

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

p.s. Другое лечение -

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

Ответ 2

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

#restart { display: block; }

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

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

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

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

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

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

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

Ответ 6

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

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

Ответ 7

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

Вот 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/

Ответ 8

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

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

Ответ 9

Предполагая, что высота линии должна быть 20 px

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

Ответ 10

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

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

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

Ответ 11

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

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

Ответ 12

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

Ответ 13

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" разрыв строки приводит к появлению пробела, эквивалентного стилизованной высоте строки.

Ответ 14

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

Ответ 15

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