<br> tag alternative for breaking text line

Question

Is there anyway to add a tag similar to a <br> tag that doesn't break a line of text straight away but only when the browser is resized and it needs to? So to create a point in which the line breaks when it's resized to a smaller browser window?

Answer 1

There is a way to tell where the test should not break, by using unbreakable spaces in your code (the html code is  ) or using the css property text-wrap: none; for a specific portion of your document.

By using either or those two techniques you can say where your text will break for wrapping (use the span html element for the css technique), but it will be a bit ugly, and not very useful in most cases and I wouldn't recommend it unless you have a good reason to do it.

Answer 2

You could certainly use media queries to only show your line break below a certain screen size:

http://jsfiddle.net/isherwood/hRL4S

br.my-class {display: none}

@media (max-width: 800px) {
     br.my-class {display: inline-block;
}

Answer 3

I usually use tables that resize, When to page is resized the text wrap usually works fine for this in html.