Як вставити розрив рядка перед елементом за допомогою CSS

170

Я відчуваю, що побачив спосіб, використовуючи властивість вмісту CSS, вставити тег розриву рядка перед елементом. Очевидно, що це не працює:

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

Але як це зробити?

css

— mheavers
джерело

2

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

— Тодд Мойсей

40

Мені здається, що макет і потік (розриви рядків можна вважати будь-якими), безумовно, входять у домен CSS.

— Тревор

12

CSS - це абсолютно для додавання чи редагування вмісту, коли він є послідовним стильовим елементом, який є частиною вашої теми. Особливо з такими системами управління контентом, як Wordpress, які не дозволяють редагувати вміст, його дуже корисно. Ось чому властивість "content" існує. Для додавання та / або редагування вмісту.

— Фей Лорен

266

Можливо, використовуючи \A послідовність евакуації у вмісті, створеному за допомогою psuedo. Детальніше читайте у специфікації CSS2

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

Вам також може знадобитися , щоб додати white-space:pre;до #restart.

Примітка: \Aпозначає кінець рядка.

ps Ще одне лікування

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

— книжкова білизна
джерело

11

Спробуйте також пробіл: попереднє обгортання; якщо ви хочете, щоб ваш текст був завернутий.

— Джазі

6

Блискуча. Слід зазначити, однак, що для цього на роботу - #restartповинна бутиdisplay: inline;

— Трой Елфорд

23

Це не працювало для мене, я використовував :before { content: ' '; display: block; }замість цього.

— Богданіо

1

Чомусь жодне з рішень не працює з inline-blockелементами. Вони просто не перейдуть на наступний рядок. Єдиним рішенням було фактично додавати порожнє <div></div>в HTML.

— Адам Рейс

2

Якщо рядок не розірвався, ви можете використовувати властивість 'white-space': до {content: '\ A'; пробіл: перед; }

— Amr

35

Якщо #restartце вбудований елемент (наприклад <span>, <em>тощо), ви можете перетворити його в блок-елемент, використовуючи:

#restart { display: block; }

Це призведе до забезпечення розриву рядка як перед елементом, так і після нього.

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

— бобінець
джерело

1

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

— mheavers

3

float: leftЕлемент може бути корисна, так як вони стискаються до нападу і почати новий рядок. Інакше те, що ви хочете, може бути неможливим.

— bobince

Декорована причина інколи розробники працюють у великому проекті, де вони не мають контролю або не можуть прийняти рішення застосувати інше рішення.

— ейрдаккуль

19

Це працює для мене:

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

— хуторний
джерело

Чомусь різні символи unicode для нового рядка не працювали для мене ..? Це рішення зробило трюк, хоча - спасибі!

— Джин Бо

1

Так, але що станеться, коли вам доведеться вводити текст всередину вмісту !? відповідь

— Sándor Zuboly

12

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

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

— Джессі Кінсман
джерело

11

Наступний CSS працював на мене:

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

— рлюки
джерело

Відмінна ідея з простим 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/

— молоток
джерело

+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

Мені зовсім не пощастило із вставкою перерви з: раніше. Моє рішення полягало в тому, щоб додати проміжок класу і поставити перерву всередині проміжку. Потім змініть клас для відображення: немає; або дисплей: блокувати за потребою.

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>

— JackHammer
джерело

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 Вміст Proerty, "нові рядки" ... p не додаватимуть поля чи заповнення в кінці p всередині батьківського блоку (наприклад, body ›section› р). Розрив рядка "\ A" примушує простір лінії, еквівалентну стильовій висоті.

— Марк Стюарт
джерело

-1

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

— punkrockbuddyholly
джерело

Не проблема в тому, що тип відображення елемента є вбудованим блоком, тому мені потрібно зробити перерву перед елементом.

— mheavers

тип дисплея вже вбудований. Я намагаюся зробити те, що я запитував вище, використовуючи властивість вмісту.

— mheavers

Ви не можете додати елементи html за допомогою властивості вмісту, це неможливо.

— punkrockbuddyholly

тому що ваша відповідь не вирішила б його проблеми. Подивіться на виграшну відповідь, у якій детально описаний спосіб надати розрив рядка за допомогою властивості вмісту (яка не сприймає html-елементи). Можливо, це було нерозуміння початкового питання.

— pdwalker

-1

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

— andy4thehuynh
джерело

2

ОП попросили еквівалент <br>, ні <hr>.

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