How to "break line" via CSS?

Question

Let's suppose that I have a HTML page that renders something like bellow:

labelA [___INPUT-TEXT____] labelB [___INPUT-TEXT____]

However, I want to "break the line" on the second label, something like:

labelA [___INPUT-TEXT____]
labelB [___INPUT-TEXT____]

Assuming that I can not change the HTML code. How can I do it with CSS?

Here is an example:

<html><head><style>
#labelA { display:block; }
#labelB { display:block; }
</style></head>
<body>
<label for="ia" id="labelA">labelA</label><input id="ia" type="text"/>
<label for="ib" id="labelB">labelB</label><input id="ib" type="text"/>
</body></html>

Any help is appreciated.

Cheers,

EDIT: I mean { display: block; } instead of {inline:block}, thanks for pointing it out.

`display: block` should fix this, assuming you don't have it floated. — Brad, Mar 30 '13 at 04:53
@brad, I was thinking the same thing, and `clear: left` would fix `float`. — Jared Farrish, Mar 30 '13 at 04:54

metadept · Accepted Answer · 2013-03-30T05:05:01.197

4

Use display: block; instead of inline: block; and I think it should do what you want.

EDIT Didn't read your question carefully enough. If you want to group the label and text input together on a line, you can use something like:

label, input {
    float: left;
}

label {
    clear: left;
}

...and here's a more polished jsFiddle demonstration courtesy of Tim Medora

edited Mar 30 '13 at 05:05

answered Mar 30 '13 at 04:53

metadept

7,831
2
18
25

1

+1 - Here's a version of that which spaces the elements and vertically aligns the text: http://jsfiddle.net/bdWRV/1/ – Tim M. Mar 30 '13 at 05:03
I tried all the answers in this post and this one seems to be the best option in my case. Thanks. – Rafa Mar 30 '13 at 14:19

score 3 · Answer 2 · answered Mar 30 '13 at 04:57

3

Here's a non-obvious way if you can use :before:

#labelB:before {
    white-space: pre;
    content: '\A';
}

http://jsfiddle.net/userdude/9AkMu/

answered Mar 30 '13 at 04:57

Jared Farrish

48,585
17
95
104

interesting! would you please provide description of content: '/A'; any website. – Bhojendra Rauniyar Mar 30 '13 at 05:55
`\A` is a just a `newline` character that works in CSS (where `\n` would not). – Jared Farrish Mar 30 '13 at 06:10
\n is "new line" and what is \a meaning ? – Bhojendra Rauniyar Mar 30 '13 at 06:53
could we apply like this : #someid /A{somestyle;} that I could give style to after a line. – Bhojendra Rauniyar Apr 04 '13 at 03:04

score 0 · Answer 3 · answered Mar 30 '13 at 04:58

0

Assuming that I can not change the HTML code. How can I do it with CSS?

The easy way to do it would be to just wrap each label/input pair in a div (or other block element, or element styled as a block element). However, if you can't change the HTML...

Demo: http://jsfiddle.net/bdWRV/

#labelB:before{ content: ""; display: block; }

This works in Chrome 25, Firefox, and IE 9/10. In my opinion, it's sort of a hack. At best, it's not ideal.

answered Mar 30 '13 at 04:58

Tim M.

53,671
14
120
163

Thanks Tim, this is a handy option. However, in my particular case float seems to be a better option because is has better compatibility. – Rafa Mar 30 '13 at 14:12

score 0 · Answer 4 · answered Mar 30 '13 at 06:01

0

You have placed wrong statement inline: block; this should be display: inline; or display: inline-block; or display: block; like this display should be defined. I think you need to learn css more then go to w3school or search for css tutorial in google or perhaps may be you have placed inline: block; mistakenly. For your question, you need to define display: block; is okay as other answers.

answered Mar 30 '13 at 06:01

Bhojendra Rauniyar

83,432
35
168
231

Right, I mistakenly placed "inline:block" [Yes, I need to learn more CSS, I am a back-end developer afterall :) ]. I've tried several combinations as you suggested, but could not achieve my goal... Thanks – Rafa Mar 30 '13 at 13:28

score 0 · Answer 5 · answered Mar 30 '13 at 09:52

just simple use <br /> but in your case, just simple used float using float is not guarantee unless you use 100% width in your element

below example using <br />

<label for="ia" id="labelA">labelA</label><input id="ia" type="text"/><br />
<label for="ib" id="labelB">labelB</label><input id="ib" type="text"/>

using float;

float:left;
width:100%;

How to "break line" via CSS?

5 Answers5