Css ile <br /> hedefleyebilir misiniz?

Satır sonunu hedeflemek mümkün mü <br/> etiketini CSS ile ?

Her satır kesişinde 1 piksel kesik çizgi olmasını istiyorum. Bir siteyi kendi CSS'imle özelleştiriyorum ve ayarlanmış HTML'yi değiştiremiyorum, aksi takdirde başka bir şekilde kullanırım.

Bunun mümkün olduğunu düşünmüyorum ama belki birisinin bildiği bir yol var.

BRsatır sonu oluşturur ve yalnızca satır sonu olur. Bu öğenin içeriği olmadığından, clearveya üzerinde uygulamak için anlamlı olan yalnızca birkaç stil vardır position. BRKenarlığını ayarlayabilirsiniz ancak görsel boyutu olmadığından göremezsiniz.

İki cümleyi görsel olarak ayırmak isterseniz, muhtemelen bu amaç için tasarlanan yatay cetveli kullanmak istersiniz . İşaretlemeyi değiştiremeyeceğiniz için, sadece CSS kullanmaktan korkuyorum, bunu başaramazsınız.

Öyle görünüyor ki, zaten diğer forumlarda tartışıldı. Re'den çıkar : CSS kullanarak BR öğesinin yüksekliğini ayarlama :

[T] onun BR için bir dereceye kadar garip bir duruma yol açması, bir yandan normal bir eleman olarak ele alınmaması, aksine üretilen içerikte \ A'nın bir örneği olarak değil, diğer yandan üzerinde (CSS özelliklerinin sınırlı bir alt kümesi) normal bir öğeye izin verilir.

Ayrıca CSS 1 spesifikasyonunda bir açıklama buldum (daha yüksek seviye spesifikasyonlardan bahsedilmiyor):

Geçerli CSS1 özellikleri ve değerleri, 'BR' öğesinin davranışını açıklayamaz. HTML'de, 'BR' öğesi kelimeler arasında bir satır sonu belirtir. Aslında, elemanın yerine satır kesmesi gelir. CSS'nin gelecekteki sürümleri eklenen ve değiştirilen içeriği işleyebilir, ancak CSS1 tabanlı biçimlendiriciler 'BR'ye özel davranmalıdır.

Grant Wagner'in testleriBR , diğer unsurlarla yapabileceğiniz gibi stil yapmanın bir yolu olmadığını gösteriyor . Ayrıca, sonuçları tarayıcınızda test edebileceğiniz çevrimiçi bir site de vardır .

Güncelleme

pelms daha fazla araştırma yaptı ve IE8'in (Win7'de ) ve Chrome 2 / Safari 4b'nin biraz stil vermenize izin verdiğine dikkat çektiBR . Ve gerçekten, kontrol ettim IE demo sayfasını ile IE Net Renderer en IE8 motoru ve işe yaradı.

Güncelleme 2 C69 bazı başka araştırmalar yapmışlardır ve bunu çıkıyor olabilir stil işaretleyici için broldukça ağır (gerçi değil, çapraz tarayıcı), henüz üst kapsayıcı ait gibi görünüyor, çünkü bu, kendini hat-kırmak etkilemez.

Aşağıdakileri deneyin, Güncelleme 2'yi yüksek oylarla başka bir cevaptan bir araya getirdim ve benim için mükemmel çalıştı:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Bir stil oluşturmak için iyi bir neden var <br> etiketi .

Kodun bir parçası olduğunda değiştirmek istemezsiniz (veya değiştiremezsiniz) ve bu <br>özelliğin görüntülenmemesini istersiniz .

.xxx br {display:none}

Çok zaman ve bazen de gününüzü kurtarabilir.

Yorumlarımı kaçırmış olabilecek gelecekteki ziyaretçilerin yararına:

br {
    border-bottom:1px dashed black;
}

çalışmıyor.

IE 6, 7 ve 8, Firefox 2, 3 ve 3.5B4, Windows için Safari 3 ve 4, Opera 9.6 ve 10 (alfa) ve Google Chrome'da (sürüm 2) test edildi ve hiçbirinde çalışmadı onlar. Gelecekte bir noktada, bir kullanıcı,<br> öğe , lütfen bu listeyi güncellemekten çekinmeyin.

Ayrıca başka şeyler denediğime dikkat edin:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Bunlardan, Opera 9.6 ve 10'da (alfa) aşağıdakiler işe yarar (teşekkürler porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Yalnızca bir tarayıcıda desteklendiğinde çok kullanışlı değil, ancak farklı tarayıcıların spesifikasyonu nasıl uyguladığını görmek her zaman ilginç buluyorum.

HTML'yi düzenleyemeyeceğinizi biliyorum, ancak CSS'yi değiştirebiliyorsanız javascript ekleyebilir misiniz?

eğer öyleyse, jquery ekleyebilir, o zaman yapabilirsin

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

IE8'de aşağıdaki gibi ... sadece bir tarayıcıda çok fazla kullanım değil.

(Not: IE 8.0.7100 kullanıyorum (Win7 RC'de) bu bir fark yaratırsa)

Ayrıca,

br:after { content: "..." }  
br { content: "" }`

veya,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

Chrome 2 / Safari 4b'de kesikli bir çizgi verir, ancak (kimseyi yeniden tanıtmak için bir yol bulamazsa) onu işe yaramazdan daha az hale getiren satır sonunu kaybeder.

örneğin
IE8 testi , Krom / Safari testi ve başka

Kendi testlerim sonuç olarak bretiketlerin css için hedeflenmeyi sevmediğini gösteriyor.

Ancak stil ekleyebiliyorsanız, muhtemelen sayfanın başlığına bir komut dosyası etiketi de ekleyebilirsiniz? .jsBöyle bir şey yapan bir harici bağlantı :

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

Kısacası, optimal değil, ama işte benim çözümüm.

bu sorunu çözüyor gibi görünüyor:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

BR bir satır öğesi, bir blok öğesi değil.

Yani ihtiyacın var:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

Aksi takdirde, bu tür şeyler hakkında biraz pickier olan tarayıcılar, BR öğelerinize kenarlık uygulamayı reddeder, çünkü satır içi öğelerin kenarlıkları, dolguları veya kenar boşlukları yoktur.

GÜNCELLEME 9/13/2019:

<br>Etiketi bu şekilde şekillendirmenin amacı, "daha büyük" bir satır sonu (yani, satırlar arasında biraz fazladan boşlukla) yapmaktır.

"Oldbig" sınıfı (aşağıda), stil için Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 ve IE 11.48.17134.0'da düzgün bir şekilde test edildi ve çalıştı. Ne yazık ki, Chrome 76 sürümünde ve türevlerinde (Ağustos 2019 dolaylarında) kırıldı. Belirti, çizgiler arasındaki fazladan alanın artık görüntülenmemesidir.

"Newbig" sınıfı, Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave ve Palemoon'un mevcut sürümlerinde test edilmiş ve düzgün çalışıyor:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

İşte bir demo:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Chrome v.76'da görüntülenen sonuç budur:

Bu sadece IE'de çalışacaktır. IE8'de test ettim.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

Bir yerleştirilen <br>bir içine etiketi <span>etiketi ve kullanımı başardı display:none;üzerinde <span>ne zaman kullanılmayacağı kontrole <br>Medya Sorgular kullanarak etiketi.

eski soru ama bu oldukça düzgün ve temiz bir düzeltme, hala mümkün olup olmadığını merak eden insanlar için kullanılabilir :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

bu düzeltme ile web sitelerindeki BR'leri de kaldırabilirsiniz (genişliği 0 piksel olarak ayarlayın)

Neden sadece HR etiketini kullanmıyorsunuz? Tam olarak ne istediğiniz için yapılır. Masada hemen önünde bir kaşık olduğunda çorba yemek için çatal yapmaya çalışmak gibi.