css'yi kullanarak <br> yüksekliğini değiştir

Question

Burada yaklaşık bir question gördüm, ancak işin hiçbir yanıtını alamıyorum (en azından kromda).

Bu soru sadece <br> içindir, yüksekliğini değiştirmek için başka teknikler de biliyorum ama bu durumda html'yi değiştiremiyorum.

bla<BR><BR>bla<BR>bla<BR><BR>bla 

CSS:

br { 
    display: block; 
    margin-bottom: 2px; 
    font-size:2px; 
    line-height: 2px; 
} 

İstenilen etki: küçük arası satır yüksekliği.

Çalışabileceğim tek şey display:none, ancak daha sonra tüm satır sonu kaldırıldı.

Bazı teknikler kullanarak bir fiddle for it işte, ancak herhangi bir css olmadan aynısını oluşturduğuna bakın.

Answer 1

Sen br etiketinin kendisinin yüksekliğini değiştiremez. Sadece yeni bir çizgi oluşturmak için bir talimat.

Hat yüksekliğini line-height stilini kullanarak değiştirebilirsiniz. Bu, boş satırlarla ayırdığınız metin blokları arasındaki mesafeyi, ancak aynı zamanda bir metin bloğundaki satırlar arasındaki mesafeyi de değiştirecektir.

Tamlık için: HTML'deki metin blokları genellikle metin bloklarının etrafındaki p etiketi kullanılarak yapılır. Bu şekilde p etiketinin içindeki satır yüksekliğini ve p etiketleri arasındaki boşlukları kontrol edebilirsiniz.

Answer 2

line-height property'a bir göz atın. <br> etiketini stillemeye çalışmak yanıt değil.

Örnek: Bu sayfada yer kaplar bir unsur olmasın da

<p id="single-spaced"> 
    This<br> 
    text<br> 
    is<br> 
    single-spaced. 
</p> 
<p id="double-spaced" style="line-height: 200%;"> 
    This<br> 
    text<br> 
    is<br> 
    double-spaced. 
</p> 

Answer 3

Bu çok hacky hissediyor ama ubuntu'ya krom 41 bir <br> biraz stylable yapabilir:

br { 
    content: ""; 
    margin: 2em; 
    display: block; 
    font-size: 24%; 
} 

I punto ile bırakılmasını kontrol eder.

Answer 4

<br> satır yüksekliği, <p> içindeki metnin geri kalanının satır yüksekliğinden farklı olabilir. <br> etiketlerinizin satır yüksekliğini, metnin geri kalanından bağımsız olarak, bunlardan ikisini stillenmiş olan <span> içine ayırarak kontrol edebilirsiniz. Başkalarının önerdiği gibi line-height css özelliğini kullanın.

<p class="normalLineHeight"> 
    Lots of text here which will display on several lines with normal line height if you put it in a narrow container... 
    <span class="customLineHeight"><br><br></span> 
    After a custom break, this text will again display on several lines with normal line height... 
</p> 

Answer 5

br etiketinin satır yüksekliği br etiketi için font-size ayarlayarak bir paragraf metnin içindeki metnin geri kalan hat yükseklikten farklı olabilir.

Örnek: br { font-size: 200%; }

Answer 6

bir yükseklik sınırlı div içine koymak eğer <br> yüksekliğini kontrol edebilirsiniz.Deneyin:

<div style="height:2px;"><br></div> 

Answer 7

içerik o içerik mülkiyet ve stilini kullanın. İçerik davranışı daha sonra pseudo elements kullanılarak ayarlanır. Pseudo elements :: before and :: Mac Safari'de her ikisi de çalıştıktan sonra 10.0.3.

burada eleman br

içerik öğesi br element çapa :: içeriğine sonra kullanılır. Br aralığının stil oluşturulabildiği, öğesidir. br ::'dan sonra br :: after içeriğinin görüntülenebileceği ve stil oluşturulabileceği yerdir. Güzel görünüyor, ama 2px <br>.

br { content: ""; display: block; margin: 1rem 0; } 
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; } 

br elemanı hattı yüksekliği özelliği göz ardı edilir. Ekranda br etiketine dikey 'kaldırma' vermek için seçicilere ya da her iki seçiciye de negatif değerler uygulanırsa, dikey boşluk oluşmasını düzeltin, ancak her biri br etiketini izleyerek artan şekilde içerik girintilerini görüntüleyin. Girinti, asıl tipografik satır yüksekliğinden kaldırma işleminin miktarına tam olarak eşittir. Doğru kaldırma işlemini tahmin ederseniz, önceden girilen bir satır bulunmaz, ancak önceki ve sonraki satırlar arasında sıkışan ham glif yüksekliğine tam olarak eşit olan tek bir yığma çizgisi yoktur. Bundan başka

, bir arka br etiket br devralmak için aşağıdaki html görüntü etiketi neden olur: içerik şekillendirme sonrası. Ayrıca, sözde elemanlar, tek bir <br> olarak yorumlanacak <br> neden olur. Sözde sınıf br: etkin, her biri <br>'un ayrı ayrı yorumlanmasına neden olur. Son olarak, br: active, br öğelerini göz ardı eder:'dan sonra ve tüm br: aktif şekillendirme. Yani, 'gerekli tüm şudur:

bir 2px yüksek <br> ekranı oluşturmak için hiçbir yardım olduğunu

br:active { } 

. Ve burada sözde sınıf: aktif göz ardı edilir!

br:active { content: ""; display: block; margin: 1.25em 0; } 
br { content: ""; display: block; margin: 1rem; } 
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; } 

Bu

yalnızca kısmi çözümdür. Sözde sınıf ve sözde öğe, eğer ayarlanmışsa, çözüm sağlayabilir. Bu CSS çözümünün bir parçası olabilir. (Ben sadece diğer tarayıcılarda denemek, Safari.)

Learn web development: pseudo classes and pseudo elements

Pay attention to global elements - BR at Mozilla.org

Answer 8

BR 'ekstra özel' bir şey ama: hala sen özelliklerini verebilir geçerli bir XML etiketi için. Örneğin, satır yüksekliğini değiştirmek için bir açıklık ile kaplamak zorunda değilsiniz, bunun yerine hat yüksekliğini doğrudan öğeye uygulayabilirsiniz.

satır içi CSS ile bunu yapabileceğimi:

This is a small line 
 
<br /> 
 
break. Whereas, this is a BIG line 
 
<br style="line-height:60vh" /> 
 
break!

Hatta kimlikleri ve sınıfların gibi istediğiniz herhangi CSS seçicileri kullanabilirsiniz.

#biglinebreakid { 
 
    line-height: 900%; 
 
    // 9x the normal height of a line break! 
 
} 
 
.biglinebreakclass { 
 
    line-height: calc(6em + 66px); 
 
    // you could even use calc! 
 
}

This is a small line 
 
<br /> 
 
break. Whereas, this is a BIG line 
 
<br id="biglinebreakid" /> 
 
break! You can use any CSS selectors you want for things like this line 
 
<br class="biglinebreakclass" /> 
 
break!

Temelde, BR etiketleri CSS stil dünyada bazı boşluk değildir: onlar hala tarz olabilir. Ancak, BR etiketlerine yalnızca line-height'u kullanmanızı tavsiye ederim. Asla bir aradan daha fazla bir şey olmayı amaçlamadılar ve bu nedenle, her zaman başka bir şey olarak kullanıldığında beklendiği gibi çalışmayabilirler. Kenar boşlukları ve dolgulamalar gibi şeyler için bir çalışma, bunun yerine bir br ile bir açıklık stili oluşturmaktır.

#paddedlinebreak { 
 
    background: orange; 
 
    line-height: calc(6em + 100%); 
 
    padding: 3em; 
 
}

<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible"> 
 
This is a padded line 
 
<span id="paddedlinebreak"><br /></span> 
 
break. 
 
</div>