Jak wstawić znak końca wiersza przed elementem za pomocą CSS

170

Wydaje mi się, że znalazłem sposób, używając właściwości CSS content, aby wstawić znacznik końca wiersza przed elementem. Oczywiście to nie działa:

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

Ale jak to robisz?

css

— mheavers
źródło

2

CSS nie służy do dodawania ani edytowania treści, ale do kontrolowania sposobu wyświetlania treści.

— Todd Moses

40

Wydaje mi się, że układ i przepływ (można też wziąć pod uwagę podziały wierszy) są zdecydowanie w domenie CSS.

— Trevor,

12

CSS służy absolutnie do dodawania lub edytowania treści, gdy jest to spójny element stylu, który jest częścią twojego motywu. Szczególnie w przypadku systemów zarządzania treścią, takich jak Wordpress, które nie pozwalają na edycję treści, jest to bardzo przydatne. Dlatego istnieje właściwość „content”. Do dodawania i / lub edycji treści.

— Fei Lauren

266

Jest to możliwe przy użyciu \A sekwencji ucieczki w treści generowanej przez element pseudo. Przeczytaj więcej w specyfikacji CSS2.

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

Konieczne może być również dodanie white-space:pre;do #restart.

uwaga: \Aoznacza koniec wiersza.

ps Kolejny zabieg

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

— regał
źródło

11

Spróbuj także spacji: pre-wrap; jeśli chcesz zawinąć tekst.

— Jazzy

6

Znakomity. Należy jednak zauważyć, że aby to zadziałało - #restartmusi też byćdisplay: inline;

— Troy Alford

23

To nie zadziałało dla mnie, :before { content: ' '; display: block; }zamiast tego użyłem .

— Bogdanio

1

Z jakiegoś powodu żadne z rozwiązań nie działa z inline-blockelementami. Po prostu nie przejdą do następnej linii. Jedynym rozwiązaniem było dołączenie pustego miejsca <div></div>w kodzie HTML.

— Adam Reis,

2

Jeśli linia nie została przerwana, możesz użyć właściwości „odstępu”: przed {content: '\ A'; spacja: pre; }

— Amr

35

Jeśli #restartjest to element inline (np <span>, <em>etc), a następnie można przekształcić go w elemencie bloku przy użyciu:

#restart { display: block; }

Będzie to miało wpływ na zapewnienie przerwania linii zarówno przed, jak i za elementem.

Nie ma sposobu, aby CSS wstawił coś, co działa jak znak końca wiersza tylko przed elementem, a nie po nim. Być może możesz spowodować przerwanie wiersza wcześniej jako efekt uboczny innych zmian, na przykład float: leftlub clear: leftpo elemencie pływającym, a nawet coś szalonego, #restart:before { content: 'a load of non-breaking spaces'; }ale prawdopodobnie nie jest to dobry pomysł w ogólnym przypadku.

— bobince
źródło

1

Nie może to być display: block - ponieważ wtedy musiałbym wyświetlić szerokość elementu, aby jego tło nie przebiegało przez całą stronę. Musi mieć możliwość automatycznego ustawienia szerokości elementu.

— mheavers

3

float: leftElementem może się przydać, ponieważ kurczą się do montażu i uruchomienia na nową linię. W przeciwnym razie to, czego chcesz, może nie być możliwe.

— bobince

przyczyna negatywna czasami programiści pracują w dużym projekcie, nad którym nie mają kontroli lub nie mogą podjąć decyzji o zastosowaniu innego rozwiązania.

— eyurdakul

19

To działa dla mnie:

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

— hutorny
źródło

Z jakiegoś powodu różne znaki Unicode w nowej linii nie działały dla mnie ..? To rozwiązanie jednak załatwiło sprawę - dzięki!

— Gene Bo

1

Tak, ale co się stanie, gdy będziesz musiał umieścić tekst również w treści !? odpowiedź

— Sándor Zuboly

12

Po prostu umieść znak nowej linii Unicode w pseudo elemencie przed:

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

— Jesse Kinsman
źródło

11

Następujące CSS zadziałały dla mnie:

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

— rluks
źródło

Doskonały pomysł ze zwykłym css

— NaveenDA,

Zadziałało dla mnie jako urok. Używam tego:content: 'bar: \a' attr(data-description);

— Jimmy Adaro,

To jest poprawna odpowiedź 👍

— cronoklee

10

Istnieją dwa powody, dla których nie możesz dodawać wygenerowanej treści za pośrednictwem CSS w sposób, w jaki chcesz:

generowana treść akceptuje treść, a nie znaczniki. Znaczniki nie będą oceniane, ale tylko wyświetlane.
:beforea :afterwygenerowana treść jest dodawana do elementu, więc nawet dodanie spacji lub litery i zdefiniowanie jej jako blocknie zadziała.

Istnieje ::outsidepseudoelement, który może zrobić, co chcesz. Wydaje się jednak, że nie ma obsługi przeglądarki. (Przeczytaj więcej tutaj: http://www.w3.org/TR/css3-content/#wrapping )

Najlepiej jest użyć tutaj trochę jQuery:

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

Przykład: http://jsfiddle.net/jasongennaro/sJGH9/1/

— Jason Gennaro
źródło

„Korzystanie z CSS”. Znalazłem odpowiedź podobną do tej, którą opracował Jesse Kinsman.

— RonnyKnoxville

4

Tak, całkowicie wykonalne, ale zdecydowanie jest to totalny hack (ludzie mogą patrzeć na ciebie nieprzyzwoicie przy pisaniu takiego kodu).

Oto kod HTML:

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

Oto CSS:

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

Oto skrzypce: http://jsfiddle.net/AprNY/

— hammerbrostime
źródło

+1 za kreatywność. Mam coś, co dołączam z zewnętrznego źródła i nie mogę zmienić rzeczywistego kodu HTML ... wygląda na to, że działa dobrze :) Dzięki!

— kontratak

3

Spróbuj wykonać następujące czynności:

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

— użytkownik
źródło

Wskazówka: dodaj co najmniej jednowierszowy komentarz, aby Twoje posty nie trafiały domyślnie do VLQQ.

— Deduplicator

1

zakładając, że chcesz, aby wysokość linii wynosiła 20 pikseli

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

— Kareem
źródło

1

W ogóle nie miałem szczęścia wstawiać przerwy z: przed. Moim rozwiązaniem było dodanie zakresu z klasą i wstawienie przerwy wewnątrz rozpiętości. Następnie zmień klasę, aby wyświetlić: none; lub wyświetl: blokuj w razie potrzeby.

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

Mam nadzieję że to pomoże.

— zrozumiałem
źródło

1

Możesz wypełnić dokument <br>tagami i włączyć je \ wyłączyć za pomocą CSS, tak jak wszystkie inne:

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

— JackHammer
źródło

0

Możesz również użyć wstępnie zakodowanej encji HTML do podziału wiersza 
w treści i będzie to miało ten sam efekt.

— Henry Gibson
źródło

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, „nowe linie” ... p nie doda marginesu ani dopełnienia na końcu p wewnątrz bloku nadrzędnego (np. sekcja ›treści› p). „\ A” łamanie linii wymusza odstęp linii, równoważną stylizowaną wysokość linii.

— Mark Stewart
źródło

-1

Dodaj margin-top:20px;do #restart. Lub jakakolwiek luka wielkości, którą uważasz za odpowiednią. Jeśli jest to element inline, musisz go dodać display:blocklub display:inline-blockchociaż nie sądzę, że inline-blockdziała na starszych wersjach IE.

— punkrockbuddyholly
źródło

Nie, problem polega na tym, że typ wyświetlania elementu to inline-block, więc muszę mieć przerwę przed elementem.

— mheavers

typ wyświetlania to już inline-block. Próbuję zrobić to, o co prosiłem powyżej, używając właściwości content.

— mheavers

Nie możesz dodawać elementów html za pomocą właściwości content, nie jest to możliwe.

— punkrockbuddyholly

ponieważ twoja odpowiedź nie rozwiązałaby jego problemu. Spójrz na zwycięską odpowiedź, w której szczegółowo opisano sposób podziału wiersza za pomocą właściwości content (która nie akceptuje elementów html). Być może było to niezrozumienie pierwotnego pytania.

— pdwalker

-1

Zamiast w jakiś sposób ręcznie dodawać znak border-bottom: 1px solid #ff0000końca wiersza, możesz wykonać implementację, która weźmie obramowanie elementu i renderuje tylko border-<side>określoną stronę.

— andy4thehuynh
źródło

2

OP poprosił o odpowiednik <br>, nie <hr>.

— Beni Cherniavsky-Paskin