CSS kullanarak bir öğeden önce satır sonu ekleme

170

Bir öğeden önce bir satır sonu etiketi eklemek için CSS içerik özelliğini kullanarak bir yol gördüm gibi hissediyorum. Açıkçası bu işe yaramıyor:

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

Ama bunu nasıl yapıyorsun?

css

— mheavers
kaynak

2

CSS içerik eklemek veya düzenlemek için değil, içeriğin nasıl görüntüleneceğini kontrol etmek içindir.

— Todd Moses

40

Bana öyle geliyor ki düzen ve akış (satır sonları da düşünülebilir) kesinlikle CSS alanı içinde.

— Trevor

12

CSS, temanızın bir parçası olan tutarlı bir stil öğesi olduğunda kesinlikle içerik eklemek veya düzenlemek içindir. Özellikle içeriğinizi düzenlemenize izin vermeyen Wordpress gibi içerik yönetim sistemlerinde son derece kullanışlıdır. "İçerik" özelliği bu yüzden var. İçerik eklemek ve / veya düzenlemek için.

— Fei Lauren

266

Psuedo elemanı tarafından oluşturulan içerikteki \A kaçış dizisini kullanmak mümkündür . Daha fazla bilgi için CSS2 spesifikasyonuna bakınız.

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

Ayrıca eklemek gerekebilir white-space:pre;için #restart.

not: \Abir satırın sonunu belirtir.

ps Olmak için başka bir tedavi

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

— bookcasey
kaynak

11

Ayrıca beyaz boşluk deneyin: ön sarma; metninizin kaydırılmasını istiyorsanız.

— Jazzy

6

Parlak. Bununla birlikte, bunun çalışması için - #restartayrıca olması gerektiği de belirtilmelidirdisplay: inline;

— Troy Alford

23

Bu benim için işe yaramadı, :before { content: ' '; display: block; }onun yerine kullandım .

— Bogdanio

1

Nedense çözümlerin hiçbiri inline-blockelemanlarla çalışmaz . Bir sonraki satıra geçmeyecekler. Tek çözüm aslında <div></div>HTML'ye boş bir boşluk eklemektir .

— Adam Reis

2

Satır kesilmediyse, 'beyaz boşluk' özelliğini kullanabilirsiniz: before {content: '\ A'; beyaz boşluk: ön; }

— Amr

35

Eğer #restartbir satır içi unsurdur (örneğin <span>, <em>vs) o zaman kullanarak bir blok elemanı dönüştürebilirsiniz:

#restart { display: block; }

Bu, öğeden önce ve sonra satır kesilmesini sağlama etkisine sahip olacaktır.

CSS'nin satır öğesi gibi davranan bir öğeyi yalnızca öğeden önce değil, sonradan eklemesinin bir yolu yoktur. Belki de daha önce diğer değişikliklerin bir yan etkisi olarak float: left, ya da clear: leftyüzen bir öğeden sonra, hatta çılgın bir şeyden sonra bir satır kesmesine neden olabilirsiniz , #restart:before { content: 'a load of non-breaking spaces'; }ancak bu muhtemelen genel durumda iyi bir fikir değildir.

— bobince
kaynak

1

Display: block olamaz çünkü o zaman elemanın arka planının sayfa boyunca tümüyle çalışmasını önlemek için bir genişlik göstermem gerekir. Öğenin genişliğini otomatik olarak ayarlayabilmesi gerekir.

— mheavers

3

Bir float: leftöğe, sığacak şekilde daralan ve yeni bir satıra başladıkları için bazı yararlı olabilir. Aksi takdirde, istediğiniz şey mümkün olmayabilir.

— bobince

indirgenmiş neden bazen geliştiriciler kontrolleri olmayan veya başka bir çözüm uygulama kararı alamadıkları büyük bir projede çalışırlar.

— eyurdakul

19

Bu benim için çalışıyor:

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

— hutorny
kaynak

Nedense, yeni satır için çeşitli unicode karakterler benim için çalışmıyor ..? Bu çözüm hile yaptı - teşekkürler!

— Gene Bo

1

Evet, ancak içeriğin içine de metin koymanız gerektiğinde ne olur? cevap

— Sándor Zuboly

12

Önceki sözde öğenin içine bir unicode yeni satır karakteri koymanız yeterlidir:

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

— Jesse Kinsman
kaynak

11

Aşağıdaki CSS benim için çalıştı:

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

— rluks
kaynak

Düz css ile mükemmel fikir

— NaveenDA

Benim için bir cazibe olarak çalıştı. Bunu kullanıyorum:content: 'bar: \a' attr(data-description);

— Jimmy Adaro

Bu doğru cevap 👍

— cronoklee

10

Oluşturulan içeriği CSS aracılığıyla istediğiniz şekilde ekleyememenizin iki nedeni vardır:

oluşturulan içerik biçimlendirmeyi değil içeriği kabul eder. İşaretleme değerlendirilmez, yalnızca görüntülenir.
:beforeve :afteroluşturulan içerik öğenin içine eklenir, böylece bir boşluk veya harf eklemek ve onu blockçalışmaz olarak tanımlamak bile mümkündür .

::outsideİstediğinizi yapabilen bir sözde öğe var. Ancak, tarayıcı desteği yok gibi görünüyor. (Daha fazla bilgiyi buradan edinebilirsiniz: http://www.w3.org/TR/css3-content/#wrapping )

En iyi bahis burada biraz jQuery kullanmaktır:

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

Örnek: http://jsfiddle.net/jasongennaro/sJGH9/1/

— Jason Gennaro
kaynak

Msgstr "CSS Kullanımı". Jesse Kinsman'ın çalışmasına benzer bir cevap buldum.

— RonnyKnoxville

4

Evet, tamamen yapılabilir ama kesinlikle toplam bir hack (insanlar size böyle bir kod yazmak için kirli görünüyor verebilir).

İşte HTML:

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

İşte CSS:

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

İşte keman: http://jsfiddle.net/AprNY/

— hammerbrostime
kaynak

+1 Yaratıcılık için. Ben harici bir kaynaktan dahil bir şey var ve gerçek HTML değiştiremezsiniz ... bu iyi çalışıyor gibi görünüyor :) Teşekkürler!

— counterbeing

3

Takip etmeyi dene:

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

— kullanıcı
kaynak

İpucu: En az bir satırlık yorum ekleyin, böylece yayınlarınız varsayılan olarak VLQQ'ya gelmez.

— Tekilleştirici

1

satır yüksekliğinin 20 piksel olmasını istediğinizi varsayarsak

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

— Kareem
kaynak

1

Önce bir mola ekleyerek hiç şansım yoktu: önce. Benim çözümüm bir sınıf ile bir span eklemek ve mola span içine koymak oldu. Sonra görüntülemek için sınıfı değiştirin: none; veya display: gerektiği gibi engelle.

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

Bu yardımcı olur umarım.

— Roger
kaynak

1

Dokümanınızı <br>etiketlerle doldurabilir ve tıpkı diğerleri gibi css ile açıp kapatabilirsiniz:

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

— Jackhammer
kaynak

0


İçeriğinizdeki satır sonu için önceden kodlanmış HTML varlığını da kullanabilirsiniz; bu, aynı etkiye sahiptir.

— Henry Gibson
kaynak

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, "newlines" ... p, ana blok içindeki p'nin sonuna kenar boşluğu veya dolgu eklemeyecektir (örn. gövde ›bölümü› p). "\ A" satır sonu, satır alanını, eşdeğer stilli satır yüksekliğini zorlar.

— Mark Stewart
kaynak

-1

Bir ekleme margin-top:20px;için #restart. Ya da hangi boyut boşluğunun uygun olduğunu hissedersiniz. Bir satır içi öğe ise, eklemeniz gerekecek display:blockya da display:inline-blockIE'nin inline-blockeski sürümlerinde çalıştığını düşünmüyorum .

— punkrockbuddyholly
kaynak

Sorun, öğenin görüntüleme türü satır içi blok olmasıdır, bu yüzden öğeden önce bir mola gerekir.

— melekler

görüntüleme türü zaten satır içi blokta. İçerik özelliğini kullanarak yukarıda istediğimi yapmaya çalışıyorum.

— melekler

Content özelliğini kullanarak html öğeleri ekleyemezsiniz, bu mümkün değildir.

— punkrockbuddyholly

çünkü cevabınız onun problemini çözemezdi. (Html öğelerini kabul etmeyecek olan) content özelliğini kullanarak satır sonu sağlamanın bir yolunu gösteren kazanan cevaba bakın. Belki de orijinal sorunun yanlış anlaşılmasıydı.

— pdwalker

-1

Bir şekilde manuel olarak satır sonu eklemek yerine border-bottom: 1px solid #ff0000, öğenin kenarlığını alacak ve yalnızca border-<side>belirttiğiniz tarafı oluşturacak bir uygulama yapabilirsiniz .

— andy4thehuynh
kaynak

2

OP eşdeğerini istedi <br>, değil <hr>.

— Beni Cherniavsky-Paskin