Zignorować <br> za pomocą CSS?

Pracuję na stronie, która ma podziały wierszy wstawione, jak <br>w niektórych nagłówkach. Zakładając, że nie mogę edytować źródłowego kodu HTML, czy jest sposób, aby w CSS zignorować te przerwy?

Optymalizuję witrynę pod kątem urządzeń mobilnych, więc nie chcę używać JavaScript.

Dzięki css możesz „ukryć” tagi br i nie będą one miały żadnego efektu:

br {
    display: none;
}

Jeśli chcesz ukryć tylko niektóre elementy w określonym typie nagłówka, po prostu wprowadź bardziej szczegółowy CSS.

h3 br {
    display: none;
}

Uwaga: to rozwiązanie działa tylko w przeglądarkach Webkit, które nieprawidłowo stosują pseudoelementy do samozamykających się tagów.

W uzupełnieniu powyższych odpowiedzi warto zauważyć, że w niektórych przypadkach należy wstawić spację zamiast po prostu ignorować <br>:

Na przykład powyższe odpowiedzi zmienią się

Monday<br>05 August

do

Monday05 August

jak zweryfikowałem, próbując sformatować mój tygodniowy kalendarz wydarzeń. Preferowane jest wstawienie spacji po wyrazie „poniedziałek”. Można to łatwo zrobić, wstawiając w CSS:

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

To sprawi

Monday<br>05 August

wygląda jak

Monday 05 August

Możesz zmienić contentatrybut w br:afterna, ', 'jeśli chcesz oddzielić przecinkami, lub umieścić w nim cokolwiek, co chcesz, ' 'aby był to separator! tak poza tym

Monday, 05 August

wygląda schludnie ;-)

Zobacz tutaj dla odniesienia.

Podobnie jak w powyższych odpowiedziach, jeśli chcesz, aby był on specyficzny dla tagu, możesz. Jeśli chcesz, aby ta właściwość działała dla tagu <h3>, po prostu dodaj na przykład h3każdą przed bri br:after.

Działa najbardziej ogólnie dla pseudotagów.

Jeśli dodasz w stylu

br{
    display: none;
}

Wtedy to zadziała. Nie jestem jednak pewien, czy zadziała w starszych wersjach IE.

Oto jak to robię:

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

Możesz użyć spanelementów zamiast metody, brjeśli chcesz, aby metoda białych znaków działała, ponieważ zależy to od pseudoelementów, które są „niezdefiniowane” dla zastępowanych elementów.

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

PRÓBNY

Przerwanie linii uzyskuje się po prostu przez ustawienie odpowiedniego elementu rozpiętości na display:block.

Używając identyfikatorów i / lub klas w znacznikach HTML, możesz łatwo kierować reklamy na każdy pojedynczy element lub kombinację elementów span przez CSS lub użyć selektorów CSS, takich jak nth-child().

Możesz więc np. Zdefiniować różne punkty przerwania, używając zapytań o media dla responsywnego układu.

Możesz także po prostu dodawać / usuwać / przełączać klasy za pomocą JavaScript (jQuery).

„Zaletą” tej metody jest jej solidność - działa w każdej przeglądarce obsługującej pseudoelementy (patrz: Czy mogę używać - zawartość generowana przez CSS ).

Alternatywnie można również dodać podział wiersza za pomocą pseudoelementów:

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

PRÓBNY

U mnie wygląda lepiej tak:

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>

W tym celu możesz po prostu zrobić tak:

br{display: none;}

a jeśli jest wewnątrz jakiegoś tagu PRE, możesz i jeśli chcesz, aby tag PRE zachowywał się jak zwykły element blokowy, możesz użyć tego CSS:

pre {white-space: normal;}

Lub możesz podążać za stylem Aneesh Karthik C, na przykład:

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

Myślę, że masz to

Jak na twoje pytanie, aby rozwiązać ten problem w Firefoksie i Operze przy użyciu podejścia Aneesh Karthik C , musisz dodać atrybut „float” right.

Sprawdź przykład tutaj. Ten CSS działa w przeglądarkach Firefox (26.0), Opera (12.15), Chrome (32.0.1700) i Safari (7.0)

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

Mam nadzieję, że to odpowie na Twoje pytanie !!

Chociaż wydaje się, że to pytanie zostało już rozwiązane, zaakceptowana odpowiedź nie rozwiązała problemu w przeglądarce Firefox. Firefox (i prawdopodobnie IE, chociaż jeszcze tego nie próbowałem) pomija białe znaki podczas czytania zawartości tagu „content”. Chociaż całkowicie rozumiem, dlaczego Mozilla to zrobiła, powoduje to wiele problemów. Najłatwiejszym obejściem, jakie znalazłem, było użycie nierozerwalnych spacji zamiast zwykłych, jak pokazano poniżej.

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

Spójrz .

Tak, możesz to zignorować <br>. Może to być potrzebne zwłaszcza w przypadku projektowania responsywnego, w którym trzeba usunąć przerwy dla urządzeń mobilnych.

HTML

<h2>

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

</h2>

Przykład CSS dla urządzeń mobilnych

/* Resize the browser window to check */

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

Sprawdź ten Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM

Możesz po prostu przekonwertować go w komentarzu.

Lub możesz to zrobić:

br {
display: none;
}

Ale jeśli tego nie chcesz, dlaczego to umieszczasz?