CSS ile <br> yoksayılsın mı?

<br>Bazı başlıklarda olduğu gibi satır sonu eklenmiş bir site üzerinde çalışıyorum . Kaynak HTML'yi düzenleyemeyeceğimi varsayarsak, CSS ile bu kesintileri görmezden gelebilmemin bir yolu var mı?

Siteyi mobil olarak optimize ediyorum, bu yüzden JavaScript'i gerçekten kullanmak istemiyorum.

Css ile br etiketlerini "gizleyebilirsiniz" ve hiçbir etkisi olmaz:

br {
    display: none;
}

Yalnızca belirli bir başlık türü içinde bazılarını gizlemek istiyorsanız, css'nizi daha belirgin hale getirin.

h3 br {
    display: none;
}

Not: Bu çözüm yalnızca sahte öğeleri kendi kendine kapanan etiketlere hatalı şekilde uygulayan Webkit tarayıcıları için çalışır.

Yukarıdaki cevaplara bir ek olarak, bazı durumlarda kişinin yalnızca göz ardı etmek yerine bir boşluk eklemesi gerektiğini belirtmek gerekir <br>:

Örneğin yukarıdaki cevaplar dönecek

Monday<br>05 August

için

Monday05 August

haftalık etkinlik takvimimi biçimlendirmeye çalışırken doğruladığım gibi. "Pazartesi" den sonra boşluk bırakılması tercih edilir. Bu, CSS'ye aşağıdakileri ekleyerek kolayca yapılabilir:

br  {
    content: ' '
}
br:after {
    content: ' '
}

Bu yapacak

Monday<br>05 August

gibi görünmek

Monday 05 August

Değişebilirsin contentiçinde niteliğini br:afteriçin ', 'size virgülle ayırmak veya içinde istediğiniz her şeyi koymak istiyorsanız ' 'o sınırlayıcı yapmak için! Bu arada

Monday, 05 August

düzgün görünüyor ;-)

Referans için buraya bakın .

Yukarıdaki cevaplarda olduğu gibi, bunu etikete özel yapmak istiyorsanız yapabilirsiniz. Bu özelliğin etiket için çalışmasını istiyorsanız , örneğin her birinin öncesine <h3>bir ekleyin ve örneğin.h3brbr:after

Genellikle bir sözde etiket için çalışır.

Stili eklerseniz

br{
    display: none;
}

O zaman bu işe yarayacak. Yine de IE'nin eski sürümlerinde çalışıp çalışmayacağından emin değilim.

Ben böyle yaparım:

br { 
    display: inline;
    content: ' ';
    clear:none;
}

Sen kullanabilirsiniz spanyerine elemanlarını bryerini aldığı elemanları "tanımlanmadı" olan sözde elemanları bağlıdır gibi, işe beyaz boşluk yöntemi istiyorum.

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

DEMO

Satır sonu, basitçe uygun aralık öğesi olarak ayarlanarak elde edilir display:block.

HTML işaretlemenizde kimlikler ve / veya Sınıflar kullanarak, yayılma öğelerinin her bir tek veya kombinasyonunu CSS ile kolayca hedefleyebilir veya CSS seçicilerini kullanabilirsiniz. nth-child() .

Böylece, örneğin duyarlı bir düzen için medya sorgularını kullanarak farklı kesme noktaları tanımlayabilirsiniz.

Ayrıca, Javascript (jQuery) ile sınıfları kolayca ekleyebilir / kaldırabilir / değiştirebilirsiniz.

Bu yöntemin "avantajı" sağlamlığıdır - sözde öğeleri destekleyen her tarayıcıda çalışır (bkz: Kullanabilir miyim - CSS Oluşturulan içerik ).

Alternatif olarak sözde elemanlar aracılığıyla bir satır sonu eklemek de mümkündür:

span.break:before {  
    content: "\A";
    white-space: pre;
}

DEMO

Benim için şöyle daha iyi görünüyor:

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

Bunun için şunu yapabilirsiniz:

br{display: none;}

ve eğer bir PRE etiketinin içindeyse, bunu yapabilirsiniz ve PRE etiketinin normal bir blok öğesi gibi davranmasını istiyorsanız, şu CSS'yi kullanabilirsiniz:

pre {white-space: normal;}

Veya Aneesh Karthik C'nin tarzını şöyle takip edebilirsiniz :

br  {content: ' '}
br:after {content: ' '}

Bence anladın

Sorunuza göre Firefox ve Opera için bu sorunu Aneesh Karthik C yaklaşımını kullanarak çözmek için "float" right "özelliğini eklemeniz gerekir.

Kontrol örneği burada. Bu CSS, Firefox (26.0), Opera (12.15), Chrome (32.0.1700) ve Safari (7.0) ile çalışır

br {
   content: " ";  
   float:right; 
}

Umarım bu soru sorunuzu yanıtlar !!

Bu soru zaten çözülmüş gibi görünse de, kabul edilen cevap sorunu benim için Firefox'ta çözmedi. Firefox (ve muhtemelen IE, denememiş olsam da) "içerik" etiketinin içeriğini okurken boşlukları atlıyor. Mozilla'nın bunu neden yaptığını tam olarak anlasam da, kendi payına düşen sorunları da beraberinde getiriyor. Bulduğum en kolay çözüm, aşağıda gösterildiği gibi normal alanlar yerine kırılmaz alanlar kullanmaktı.

.noLineBreaks br:before{
content: '\a0'
}

Bir göz atın .

Evet, bunu görmezden gelebilirsiniz <br>. Buna özellikle mobil cihazlar için araları kaldırmanız gereken duyarlı tasarım durumunda ihtiyacınız olabilir.

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

Mobil örnek için CSS

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

Bu Codepen'e göz atın:
https://codepen.io/fluidbrush/pen/pojGQyM

Bunu bir yorumda kolayca dönüştürebilirsiniz ..

Ya da bunu yapabilirsiniz:

br {
display: none;
}

Ama istemiyorsan neden oraya koyuyorsun?