Breaking lines into multiple lines

[Vermaas]

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!

[Paulie_D]

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.

[Vermaas]

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.

[wolfcry911]

this?
https://css-tricks.com/video-screencasts/67-jquery-part-3-image-title-plugin/

[Vermaas]

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

[Vermaas]

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

[Author]

Posts