CSS - divide inline-block span elements with ::bef

Question

I want to list bits of info divided by pipes, which is easy. But I would like the bits of info to wrap onto multiple lines if the width of the device is slim. I could use a table, but it would take up precious space..

Code: http://jsfiddle.net/Z4NeK/4/

CSS:

span.course-item-details { 
  white-space: pre;
  display: inline-block;
}

p.course-item-meta span~span::before { 
  content: "| ";
}

The text within each span does not wrap, as desired. The spans wrap correctly when the screen is slim. All good!

BUT.. The start of each subsequent line has a divider on it, when the dividers should only be shown between each span.

The | divider is shown only before each span that is preceded by another span, but that's the best I can do. I cannot find a way to select the first element on a line, no matter how many lines the items end up being wrapped to.

I hope that makes sense! Check out the jsfiddle to see the code in action.

I'd really appreciate your input. Any ideas? Is this possible?

Many thanks,

~Rik

Answer 1

You may turn it backwards, using ::after, so this stand alone pipe stands only a the end of the lines except for the last one: TEST

span.course-item-details { 
   white-space: pre;
   display: inline-block;
}

p.course-item-meta span::after { 
   content: "| ";
}
p.course-item-meta span:last-of-type::after { 
   content: "";
}

For the question part about how to select start or end of a line, CSS has no options to do this.

Answer 2

You can use a negative margin-left combined with overflow: hidden in an extra wrapper. Then use text-indent to cancel the margin on the first line.

It's best to use a separator that you know the exact width of (e.g. padding+border) rather than text, which will have variable width. This way you can subtract the exact width of the separator via a negative margin.

(Also note the use of font-size: 0 to cancel out the whitespace between inline-block items.)

http://jsfiddle.net/Z4NeK/6/

HTML:

<div class="outer">
    <div class="inner">
        <span class="item">Item one</span>
        <span class="item">Item two</span>
        <span class="item">Item three</span>
        <span class="item">Item four</span>
        <span class="item">Item five</span>
    </div>
</div>

CSS:

.outer {
    text-indent: 5px;
    overflow: hidden;
}

.inner {
    margin-left: -5px;
    font-size: 0;
}

.item {
    text-indent: 0;
    font-size: 1rem;
    padding-left: 4px;
    padding-right: 4px;
    border-left: 1px solid #000;
    display: inline-block;
    white-space: nowrap;
}

.item:first-child {
    padding-left: 0;
    border-left: none;
}

.item:last-child {
    padding-right: 0;
}