4

Okay, you’re got a box. You are rendering two (or more items) in the box. Let's assume they are inline (or inline-block) elements. When more than one item appears on the same line, we want to insert the string · between the items. However, when the second (or whatever) item begins a new line, we want to skip the separator.

Is there a reasonable CSS-only solution to this design requirement?

Here is an example JSFiddle.

screen shot showing desired and ideal renderings

Alan H.
  • 16,219
  • 17
  • 80
  • 113
  • I don't think it is possible with CSS. This might help you https://stackoverflow.com/questions/37216397/detect-inline-floated-element-being-pushed-to-new-line. Here `::first-line` is used to solve the problem, but It won't apply to your case. – beginner Jan 03 '23 at 07:37
  • 1
    @TemaniAfif I must be missing something because I can't see a CSS-only solution that works in the general case in the link you have given (the accepted answer bungs a load of spurious HTML into the code). Could you point me to the answer that works in this question's case? Thanks. – A Haworth Jan 03 '23 at 08:24
  • @AHaworth *the accepted answer bungs a load of spurious HTML into the code* --> the code is nothing but li elements inside and ul. Where do you see the spurious HTML? You can also find links to other answers and the end of the accepted one – Temani Afif Jan 03 '23 at 08:40
  • @TemaniAfif - many thanks. You are of course correct. I had not spotted that the second ('simplified case' )was completely different (=I didn't read carefully enough) and indeed is a good answer. – A Haworth Jan 03 '23 at 09:19

0 Answers0