CODEWITHSUNDEEP
htmlcss
Craig Andera
Craig Andera

Reputation:

How to insert line breaks in HTML documents using CSS

I'm writing a web service, and I want to return the data as XHTML. Because it's data, not markup, I want to keep it very clean - no extra <div>s or <span>s. However, as a convenience to developers, I'd also like to make the returned data reasonably readable in a browser. To do so, I'm thinking a good way to go about it would be to use CSS.

The thing I specifically want to do is to insert linebreaks at certain places. I'm aware of display: block, but it doesn't really work in the situation I'm trying to handle now - a form with <input> fields. Something like this: 

<form>
  Thingy 1: <input class="a" type="text" name="one" />
  Thingy 2: <input class="a" type="text" name="two" />
  Thingy 3: <input class="b" type="checkbox" name="three" />
  Thingy 4: <input class="b" type="checkbox" name="four" />
</form>

I'd like it to render so that each label displays on the same line as the corresponding input field. I've tried this: 

input.a:after { content: "\a" }

But that didn't seem to do anything.

Upvotes: 40

Views: 82072

Answers (12)

D-n Russler
D-n Russler

Reputation:

The secret is to surround your whole thingie, label and widget, in a span whose class does the block and clear:

CSS

<style type="text/css">
  .lb {
    display:block;
    clear:both;
  }
</style>

HTML

<form>
  <span class="lb">Thingy 1: <input class="a" type="text" name="one" /></span>
  <span class="lb">Thingy 2: <input class="a" type="text" name="two" /></span>
  <span class="lb">Thingy 3: <input class="b" type="checkbox" name="three" /></span>
  <span class="lb">Thingy 4: <input class="b" type="checkbox" name="four" /></span>
</form>

Upvotes: 1

BrewinBombers
BrewinBombers

Reputation: 1492

It'd be best to wrap all of your elements in label elements, then apply css to the labels. The :before and :after pseudo classes are not completely supported in a consistent way.

Label tags have a lot of advantages including increased accessibility (on multiple levels) and more.

<label>
    Thingy one: <input type="text" name="one">;
</label>

then use CSS on your label elements...

label {display:block;clear:both;}

Upvotes: 54

Jimmy
Jimmy

Reputation: 91432

the following would give you the newlines. It would also put extra spaces out in front though... you'd have to mess up your source indentation by removing the tabbing.

form { white-space: pre }

Upvotes: 4

Doug Moore
Doug Moore

Reputation: 1193

The javascript options are all over complicating things. Do as Jon Galloway or daniels0xff suggested.

Upvotes: 0

DamienG
DamienG

Reputation: 6665

One option is to specify a XSLT template within your XML that (some) browsers will process allowing you to include presentation with mark-up, CSS, colors etc. that shouldn't affect consumers of the web service.

Once in XHTML you could simply add some padding around the elements with CSS, e.g.

form input.a { margin-bottom: 1em }

Upvotes: 2

Galen
Galen

Reputation: 30170

<style type="text/css">
label, input { float: left; }
label { clear:left; }
</style>

<form>
    <label>thing 1:</label><input />
    <label>thing 2:</label><input />
</form>

Upvotes: 2

daniels
daniels

Reputation: 19203

<form>
   <label>Thingy 1: <input class="a" type="text" name="one" /></label>
   <label>Thingy 2: <input class="a" type="text" name="two" /></label>
   <label>Thingy 3: <input class="b" type="checkbox" name="three" /></label>
   <label>Thingy 4: <input class="b" type="checkbox" name="four" /></label>
</form>

and the following css

form label { display: block; }

Upvotes: 2

Leo Utskot
Leo Utskot

Reputation:

The CSS clear element is probably what you are looking for the get linebreaks. Something along:

#login form input { clear: both; }

will make sure the no other floating elements are left to either side of you input fields.

Reference

Upvotes: 0

Jim
Jim

Reputation: 73936

Form controls are treated specially by browsers, so a lot of things don't necessarily work as they should. One of these things is generated content - it doesn't work for form controls. Instead, wrap the labels in <label> and use label:before { content: '\a' ; white-space: pre; }. You can also do it by floating everything and adding clear: left to the <label> elements.

Upvotes: 42

Jon Galloway
Jon Galloway

Reputation: 53115

It looks like you've got a bunch of form items you'd like to show in a list, right? Hmm... if only those HTML spec guys had thought to include markup to handle a list of items...

I'd recommend you set it up like this:

<form>
  <ul>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
    <li><label>Thingy 1:</label><input class="a" type="text" name="one" /></li>
 </ul>
</form>

Then the CSS gets a lot easier.

Upvotes: 12

Thunder3
Thunder3

Reputation: 1120

I agree with John Millikin. You can add in <span> tags or something around each line with a CSS class defined, then make them display:block if necessary. The only other way I can think to do this is to make the <input> an inline-block and make them emit "very large" padding-right, which would make the inline content wrap down.

Even so, your best bet is to logically group the data up in <span> tags (or similar) to indicate that that data belongs together (and then let the CSS do the positioning).

Upvotes: 0

Dergachev
Dergachev

Reputation: 348

Use javascript. If you're using the jQuery library, try something like this:

$("input.a").after("<br/>")

Or whatever you need.

Upvotes: -1

Related Questions