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

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

155 голосов
/ 09 сентября 2011

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

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

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

Ответы [ 15 ]

244 голосов
/ 01 августа 2012

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

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

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

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

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

:before { content: ' '; display: block; }
33 голосов
/ 09 сентября 2011

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

#restart { display: block; }

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

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

19 голосов
/ 07 ноября 2013

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

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}
12 голосов
/ 19 апреля 2013

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

#restart:before { content: '\00000A'; }
10 голосов
/ 09 сентября 2011

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

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

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

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

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

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

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

7 голосов
/ 07 октября 2017

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

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}
4 голосов
/ 19 апреля 2013

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

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

3 голосов
/ 04 декабря 2014

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

#restart::before {
  content: '';
  display: block;
}
1 голос
/ 27 ноября 2017

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

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
1 голос
/ 07 июня 2016

Мне совсем не повезло, вставив разрыв с: 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;
    }
}

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...