0

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
Konstantin
  • 2,983
  • 3
  • 33
  • 55
  • 2
    There is no native solution in CSS for this. (And whether it is a good idea to begin with, would be another question - as a user totally unfamiliar with the _meaning_ of the content, how am I supposed to be able to tell that the third item in that list is not supposed to be `The bird Kinderseele` now, but that these are supposed to be two separate items?) Without the centering part, you could simply place the separator before the items, and then cut the first "row" of separators by hiding them inside the hidden overflow of a parent wrapper, but the centering requirements makes that impossible. – CBroe Jan 24 '22 at 14:56
  • The avoid the problem of reading together two consecutive but separate titles, I could use something like: «The European» | «Iris» | «The bird» | «Kinderseele» | «Faldum» | «Strange News from Another Star» | «Francis of Assisi» – Konstantin Jan 24 '22 at 15:02
  • 1
    Here's an example that hides the separator at the end of each line: https://jsfiddle.net/cg5a3798/ –  Jan 24 '22 at 15:04
  • @ChrisG Looks promising. Could it be centered somehow? This is also a similar example https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_menu – Konstantin Jan 24 '22 at 15:12
  • Please don't use or link to w3schools. As for centering it; my solution only works as long as the separators are at the very edge of the container. –  Jan 24 '22 at 19:02

0 Answers0