treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Breaking lines into multiple lines

  • 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!

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

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

  • Yeah that was the one I was talking about! But... Chris uses a <br /> 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..

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