Line break for media query?

Question

Is there any solution for line breaking when the screen resolution is less than <br> ?

because br breaks the line all the time :(

Here is my code <h2>I create unique, clean sites that are easy to navigate.<br>All my works comply with web</h2>

I think CSS3 may have a solution to this problem

is there any solution for this <br> because line break is only needed when using the page on a mobile device

in advance for your help

Answer 1

You can simply add the class to the BR tag and set its display: not by default.

Then, in your mobile media request, set it to "display: static"

I suggested a static rather than a block, because I don't think that the BR tag is a display block by default, so it's probably best to go with statics.

Answer 2

If using Bootstrap:

 <br class="visible-xs"> 

Answer 3

You can just use a float, so you never even have to think about where the anchor point should be. It either appears as next to each other, or is instantly snapped to the next line if they do not fit.

 span { display: block; float: left; margin-right: 0.4em; } 

jsFiddle: http://jsfiddle.net/e4mWK/

Answer 4

First move the mobile phone, hide br , then return the display to initial on large screens:

 <br class="hide desktop-show"> 

css:

 .hide { display: none; } @media (min-width: 64em) { .desktop-show { display: initial; } }