Is this CSS accepted and well-defined, or a failure-prone hack?

Question

Is hiding a <br /> tag with CSS a well defined way to make line breaks conditional on the definition of the tag's CSS style? Is it portable across browsers? When I want it to show, is "inline" the best display type to use?

Given the following CSS and HTML,

<style type="text/css">
  .maybe-hidden {display:inline}
</style>

abra<br class='maybe-hidden' />
ca<br class='maybe-hidden' />
dabra<br class='maybe-hidden' />

I expect to see:

abra
ca
dabra

Changing the maybe-hidden to be maybe-hidden {display:hidden}, I expect to see

abracadabra

EDIT:

I appreciate the answers about how better to do this. What I perhaps failed to say is that this would be in generated HTML, and changing the CSS class of the actual element, as some suggested, would not be feasible.

But changing the style's definition is feasible, as is changing the class of the parent/enclosing/containing HTML element.

That's why I needed to know if this was well-defined. While I'm going to accept an answer that answered that question, that in no way means that I think the answers suggesting changing the class are "wrong"; they're just not feasible in my situation.

Answer 1

You could simply remove the "display: inline" entirely. Having nothing between the brackets will make your class "undefined" and give the <br> tag its usual meaning.

Answer 2

Personally, I think it's better to create two CSS classes (e.g., "hidden" and "shown") to then change the DOM element's classes dynamically.

If you're concerned about changing all your <br> tags at once, you can use a selector based on their container:

CSS:

.hidden maybe-hidden
{
    display: none;
}

.shown maybe-hidden
{
    display: inline;
}

HTML:

<div class="shown">
    abra<br class='maybe-hidden' />
    ca<br class='maybe-hidden' />
    dabra<br class='maybe-hidden' />
</div>

And then use JS to change the class of the div.

Answer 3

I would not use this method of conditionally inserting line breaks. If there is a possibility of something that might be a single line or multiple, don't use an HTML element that is used for line-breaks and preventing that, but use the intended CSS. This could be:

<span class="first">abra</span>
<span class="second">ca</span>
<span class="third">dabra</span>

and making them either display:inline; or display:block;.

You could also use floats, but that caused side effects like float clearing that add nothing to your specific situation. It's best to use the correct (semantic) HTML tags, and proper classnames and CSS to get the markup that you require.

Also see: http://tantek.com/log/2002/12.html for some ideas on this subject.

Answer 4

It should work fine across browsers. I wouldn't set any default display for the class at all though:

.maybe-hidden-show { /* display:default; */ }
.maybe-hidden-hide { display: none; }

I include the obviously invalid display:default in comments in the -show class to express the intent of the class (use the element's default display).

Then you can just swap the class on the element using jQuery or plain JavaScript.