Detecting and conditionally hiding end-of-line character on wrap

[theMikeD]

Not sure if this should be in the JS or the CSS forum so I’ll start here.

The scenario: I have a list of cities that are displayed on a single line with a separator symbol, which is *. So I have this basically

city * city * city * city * city

The * is added via ::after and the last one is removed via :last-child::after

The issue becomes when the line wraps and I’m left with a * symbol at the end of the wrapped line, like this

city * city * city *
city * city

I’d like to hide that * at the end of the first line. Is this possible?

…Mike

[Paulie_D]

Could you not swap it out for a :before and remove it from the 1st item?

Hmmm…no, on second thought all that will do is give you a separator at the start of the second line.

JS is the answer…I feel.

[theMikeD]

The codepen: http://codepen.io/theMikeD/pen/VYmByx

[Paulie_D]

Hmm…The Js looks to be quite complex based on a Google search…and I’m suspecting that it might be more trouble than it’s worth.

https://www.google.co.uk/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#q=javascript%20detect%20where%20text%20will%20break

[Senff]

It can be done, but it’s a little hacky and it will only work when the cities are aligned left.

Put all the items in a wrapping DIV. Make the asterisk appear BEFORE every item — even the first one. Then shift everything a little to the left, so that every asterisk that appears as the first character of a line, will be hidden from view.

See http://codepen.io/senff/pen/XJNBLa (wrapping DIV has border just to show where it’s at).

[theMikeD]

How about this http://codepen.io/theMikeD/pen/RNoYbd

[Senff]

That doesn’t really work if you change the width of that DIV.

Try changing it to 100px (or 300px) and see what happens.

[theMikeD]

I think this does it. http://codepen.io/theMikeD/pen/VYmGqZ

[Author]

Posts