Remove <br> tag from flow

Sometimes — on promo pages — we want to use tag <br> for neatly formatted text blocks "as in PSD" from designer. But using <br> isn't good, and on small screen of smartphone those blocks will have awkward views.

But we can use simple trick — set CSS  media query with breakpoint (say, for smartphone screens), and set rule for <br> tag property display with value none. That force browser to remove <br> tags from flow, and text will be shown properly.

See an example below — on wide screen (open example in separate window) text shown as preformatted with breaks, on narrow screen (768 px and narrowed) — without breaks. (I used red background only as indicator of without-br mode.)

See the Pen Remove tag
from flow by borshak (@borshak) on CodePen.

P.S. Краткий перевод на русский - если мы хотим использовать тег br, и в то же время не хотим, чтобы он портил текст на экранах сматрфонов, мы создать CSS-медиазапрос, и в нем прописать правило, которое заставит браузер на мелких экранах убирать тег br из потока. Подробности смотрите в коде примера.