CSS Content in next line

[kilarurajesh2003]

Hi Everyone,

I have requirement where CSS text should be in next line. Please see the attached image

Before Applying CSS

“Access Level”.

I want new line immediately after it is encountered with space. For example in Executive User I want “Executive” and “User” in different line but not in same line as shown in the above figure. For your understanding I have created image in paint how it should be after applying CSS. Please see the below figure

After Applying CSS

“Access Level Modified”

[Paulie_D]

That would be the simplest way.

You can’t do this with CSS alone , you would need javascript.

Overall, it’s not worth it IMO.

[kilarurajesh2003]

Thanks for your inputs though but java script is mostly not allowed in my project. If there is a way in CSS it is much appreciated. Thanks for your suggestions.

[Paulie_D]

Nope…not with CSS on the text.

CSS can’t detect spaces and there is no ‘first-word’ selector.

[kilarurajesh2003]

Thanks Paulie_D for your input I will let them know that it is not possible through CSS.

[Paulie_D]

You can cheat though (although I wouldn’t recommend it)…http://codepen.io/Paulie-D/pen/uvDLt

[wolfcry911]

[Here’s one way](http://codepen.io/wolfcry911/pen/DtBns “”), a fork of Paulie’s pen

[Paulie_D]

Yeah, I thought of that but it depends on the length of the first word being long.

http://codepen.io/Paulie-D/pen/tbuaA

[Kitty Giraudel]

Same as @posterity576 and @joshuanhibbert, I don’t really see the point.

Anyway, if you really want to add a break line after a blank, you’ll have to use JavaScript. You cannot do it with pure CSS.

The simplest workaround with CSS would be to give a width to the labels in order to make the second word create a second line. But it’s not dynamic since it rely on words length.

[pratikbhatt2009]

You can do one thing. Make one main div for check-box area.
Than in that place check-box in one div & right label in other div. And fix the width of right label & set line height. I think your problem will get resolved.

[Paulie_D]

@pratikbhatt2009

That has the same problem that it will depend on the length of the first word being long enough to create a break.

Unless there is an overriding UX / UI reason for this two line concept, I wouldn’t bother.

[Paulie_D]

Frankly, why even have the word user repeated…just put it in the heading?

http://codepen.io/Paulie-D/pen/tbuaA

[Author]

Posts