Cara menyisipkan baris sebelum elemen menggunakan CSS

Saya merasa seperti melihat cara, menggunakan properti konten CSS, untuk menyisipkan tag baris sebelum elemen. Jelas ini tidak berhasil:

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

Tetapi bagaimana Anda melakukan ini?

Mungkin saja menggunakan \A urutan pelarian dalam konten yang dihasilkan elemen psuedo. Baca lebih lanjut di spec CSS2.

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

Anda juga mungkin perlu menambahkan white-space:pre;untuk #restart.

note: \Amenunjukkan akhir dari sebuah garis.

ps Perawatan lain yang akan dilakukan

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

Jika #restartelemen inline (mis. <span>, <em>Dll) maka Anda dapat mengubahnya menjadi elemen blok menggunakan:

#restart { display: block; }

Ini akan memiliki efek memastikan garis terputus sebelum dan sesudah elemen.

Tidak ada cara untuk membuat CSS menyisipkan sesuatu yang bertindak seperti satu baris saja sebelum elemen dan bukan sesudahnya. Anda mungkin dapat menyebabkan break-line sebelumnya sebagai efek samping dari perubahan lain, misalnya float: left, atau clear: leftsetelah elemen melayang, atau bahkan sesuatu yang gila, #restart:before { content: 'a load of non-breaking spaces'; }tetapi ini mungkin bukan ide yang baik dalam kasus umum.

Ini bekerja untuk saya:

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

Masukkan saja karakter unicode baris baru ke dalam elemen pseudo sebelumnya:

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

CSS berikut berfungsi untuk saya:

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

Ada dua alasan mengapa Anda tidak dapat menambahkan konten yang dihasilkan melalui CSS dengan cara yang Anda inginkan:

1. konten yang dihasilkan menerima konten dan bukan markup. Markup tidak akan dievaluasi tetapi hanya ditampilkan.

2. :beforedan :afterkonten yang dihasilkan ditambahkan di dalam elemen, sehingga bahkan menambahkan spasi atau huruf dan mendefinisikannya sebagai blocktidak akan berfungsi.

Ada ::outsideelemen pseudo yang dapat melakukan apa yang Anda inginkan. Namun, tampaknya tidak ada dukungan browser. (Baca lebih lanjut di sini: http://www.w3.org/TR/css3-content/#wrapping )

Taruhan terbaik adalah menggunakan sedikit jQuery di sini:

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

Contoh: http://jsfiddle.net/jasongennaro/sJGH9/1/

Ya, benar-benar bisa dilakukan tetapi jelas merupakan peretasan total (orang-orang mungkin memberi Anda tampilan yang kotor untuk menulis kode seperti itu).

Ini HTML-nya:

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

Inilah CSS-nya:

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

Ini biola: http://jsfiddle.net/AprNY/

Coba yang berikut ini:

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

dengan asumsi Anda ingin tinggi garis menjadi 20 px

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

Saya tidak beruntung sama sekali dengan memasukkan jeda dengan: sebelumnya. Solusi saya adalah menambahkan span dengan kelas dan meletakkan break di dalam span. Kemudian ubah kelas untuk ditampilkan: tidak ada; atau tampilan: blokir sesuai kebutuhan.

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

Semoga ini membantu.

Anda dapat mengisi dokumen Anda dengan <br>tag dan menyalakannya \ dengan css seperti yang lain:

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

Anda juga dapat menggunakan entitas HTML pra-disandikan untuk jeda baris 
dalam konten Anda dan itu akan memiliki efek yang sama.

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

https://www.w3.org/TR/CSS2/generate.html#x18 Content Proerty, "baris baru" ... p tidak akan menambahkan margin atau bantalan pada akhir p di dalam blok induk (misalnya, badan ›bagian› p). Garis "\ A" memaksa ruang garis, ketinggian garis yang setara.

Tambahkan margin-top:20px;ke #restart. Atau berapa pun ukuran celah yang Anda rasa sesuai. Jika elemen inline Anda harus menambahkan display:blockatau display:inline-blockmeskipun saya pikir tidak inline-blockberfungsi pada versi IE yang lebih lama.

Alih-alih menambahkan garis hentian secara manual, Anda bisa melakukan implement border-bottom: 1px solid #ff0000yang akan mengambil perbatasan elemen dan hanya membuat border-<side>sisi mana pun yang Anda tentukan.