I have a one-liner list of titles, for example:

The European | Iris | The bird | Kinderseele | Faldum | Strange News from Another Star | Francis of Assisi

It will wrap automatically on a webpage, according to the actual font, font-size, div width, height, screen width, etc., for example:

The European | Iris | The bird
Kinderseele | Faldum
Strange News from Another Star 
Francis of Assisi

Of course the list will be aligned to center. But: I would like to hide somehow the separator marker vertical bars (or other actual separator, like slash, dot, hyphen ) when they are appearing at the line ending or at line starting, simply they are not needed in that case. Is it possible somehow with CSS, HTML and JavaScript?

I already know that I can use non-breaking spaces instead of simple spaces to prevent wrapping the individual titles. Maybe I can use some kind of hyphenation for the separator marker. Hyphenation can be achieved by placing soft-hyphenation markers into the text with HTML entity ­ which are supported by many browsers. I still have no clue how can I achieve that the hyphenation marker should be a vertical line preceded by a non breaking space, and it still wouldn't solve the problem, as hyphens always appear at end of lines, exactly there where it shouldn't in this particular case. Maybe some clever JavaScript trick could solve the problem, or wrapping the separator markers into appropriate HTML elements, like div, span, p, etc.