The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS Content in next line

  • # February 4, 2013 at 4:19 pm

    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”

    # February 4, 2013 at 5:05 pm

    This reply has been reported for inappropriate content.

    That’s not css it just need a

    # February 4, 2013 at 5:33 pm

    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.

    # February 4, 2013 at 5:39 pm

    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.

    # February 4, 2013 at 5:41 pm

    Nope…not with CSS on the text.

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

    # February 4, 2013 at 5:45 pm

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

    # February 4, 2013 at 5:51 pm

    You can cheat though (although I wouldn’t recommend it)…

    # February 4, 2013 at 6:00 pm

    This reply has been reported for inappropriate content.

    This may just be me, but forcing user to be on the second line affects readability. When readability is low so too is rate-of-completion.

    Just a thought.

    # February 4, 2013 at 7:26 pm

    [Here’s one way]( “”), a fork of Paulie’s pen

    # February 5, 2013 at 1:38 am

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

    # February 5, 2013 at 2:04 am

    This reply has been reported for inappropriate content.

    I have to second @posterity576‘s post. Why are you doing this? Unless there is a really good reason, you should avoid it as it decreases readability.

    # February 5, 2013 at 4:06 am

    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.

    # February 6, 2013 at 6:57 am

    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.

    # February 6, 2013 at 7:52 am


    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.

    # February 6, 2013 at 7:57 am

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed