CODEWITHSUNDEEP
css
tpdi
tpdi

Reputation: 35141

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

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.

Upvotes: 2

Views: 290

Answers (4)

CLaRGe
CLaRGe

Reputation: 1831

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.

Upvotes: 1

Grant Wagner
Grant Wagner

Reputation: 25931

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.

Upvotes: 1

Kamiel Wanrooij
Kamiel Wanrooij

Reputation: 12404

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.

Upvotes: 3

Dan Lew
Dan Lew

Reputation: 87440

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.

Upvotes: 3

Related Questions