Grow your CSS skills. Land your dream job.

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

    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)…http://codepen.io/Paulie-D/pen/uvDLt

    # February 4, 2013 at 6:00 pm

    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](http://codepen.io/wolfcry911/pen/DtBns “”), 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.

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

    # February 5, 2013 at 2:04 am

    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

    @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.

    # February 6, 2013 at 7:57 am

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

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

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".