Grow your CSS skills. Land your dream job.

Breaking lines into multiple lines

  • # October 2, 2012 at 5:29 pm

    Hi all,

    I’ve seen people struggling with this before, but couldn’t find the answer (nor topic). So I’m going to ask you guys here. I want to break one single line into multiple lines if the one line is too wide. Well that’s not a problem, because the browsers can do that. But I want it like this: http://codepen.io/stefanvermaas/pen/mFKie

    The only problem with this code is: it’s with spans (and I don’t want them, because the data for that tag will be coming from WP). I’ve tried a lot, but couldn’t figure out how to do this, without using span’s or so..

    Do you guys have any idea how I could fix this? I prefer a CSS solution, but if someone knows a way to do this with some JS, it will be ok too!

    # October 2, 2012 at 6:45 pm

    I don’t think you can do this yet.

    text-align-last:right;

    This should solve it but it doesn’t have deep (if any) browser support as yet.

    # October 2, 2012 at 6:51 pm

    Hi @Paulie_D, thanks for the info. Didn’t knew about this feature (off course not otherwise I wouldn’t ask :P). It might be a solution in the future, but I’m hoping someone has a more bulletproof way of doing this.

    I know i’ve seen @chriscoyier talking/writing about this, but I can’t remember where or when that was.

    # October 2, 2012 at 7:11 pm

    Yeah that was the one I was talking about! But… Chris uses a `
    ` to break the content. I haven’t that ability, because it will be auto-generated with WP and it will be based on a title of a article..

    I want to break the line, when the surrounding area is to big. I can reproduce this with and “ul li” but can’t make it work with a normal link..

    # October 18, 2012 at 3:01 pm

    For those who are interested:
    I finally found a way (without any JS) to make this concept work: http://codepen.io/stefanvermaas/pen/mFKie

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

You must be logged in to reply to this topic.

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