Добавьте разделитель труб после элементов в неупорядоченном списке, если этот элемент не является последним в строке

просто

li + li::before {
    content: " | ";
}

конечно, это на самом деле не решает проблему ОП. Он хочет, чтобы elide вертикальные полосы в начале и конце линий в зависимости от того, где они сломаны. Я выйду на конечность и утверждаю, что эта проблема не разрешима с помощью CSS, и даже не с JS, если только вы не хотите существенно переписать логику текстового измерения/компоновки/разрыва строки браузера.

единственные части CSS, насколько я вижу, которые "знают" о линии ломка-это, во-первых,::first-line псевдо элемент, который не помогает нам здесь--в любом случае, он ограничен несколькими презентационными атрибутами и не работает вместе с такими вещами, как ::до и ::после. Единственный другой аспект CSS, который я могу думать о том, что в какой-то степени раскрывает разрыв строки, - это перенос. Однако перенос-это все о добавлять символ (обычно тире) до конца строк в определенных ситуациях, тогда как здесь мы обеспокоены удаление символ (вертикальная линия), поэтому я просто не вижу, как применить любую логику, связанную с переносом, даже с помощью таких свойств, как hyphenate-character.

у нас есть word-spacing свойство, которое применяется внутри строки, но не в начале и конце строки, что кажется многообещающим, но оно определяет ширину пространства между словами, а не символ(Ы), который будет использоваться.

интересно, есть ли какой-то способ использовать text-overflow имущество, которое имеет малоизвестная возможность принимать два значения для отображения текста переполнения слева и справа, как в

text-overflow: '' '';

но все еще не кажется, что есть какой-либо очевидный способ добраться от A до B здесь.

прежде чем показывать код, стоит отметить, что IE8 поддерживает :first-child а не :last-child, поэтому в подобных ситуациях, вы должны использовать :first-child псевдо-класса.

демо

#menu{
    list-style: none;
}
#menu li{
    display: inline;
    padding: 0 10px;
    border-left: solid 1px black;
}
#menu li:first-child{
    border-left: none;
}

<ul id="menu">
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>More animals</li>
</ul>

использовать :after псевдо селектор. Смотрите http://jsfiddle.net/A52T8/1/

<ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

ul li { float: left; }
ul li:after { content: "|"; padding: 0 .5em; }

EDIT:

решение на jQuery:

html:

<div>
    <ul id="animals">
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
        <li>Monkey</li>
        <li>Hedgehog</li>
        <li>Chicken</li>
        <li>Rabbit</li>
        <li>Gorilla</li>
    </ul>
</div>

css:

div { width: 300px; }
ul li { float: left; border-right: 1px solid black; padding: 0 .5em; }
ul li:last-child { border: 0; }

jQuery

var maxWidth = 300, // Your div max-width
    totalWidth = 0;
$('#animals li').each(function(){
    var currentWidth = $(this).outerWidth(),
        nextWidth = $(this).next().outerWidth();
    totalWidth += currentWidth;
    if ( (totalWidth + nextWidth) > maxWidth ) {
        $(this).css('border', 'none');
        totalWidth = 0;
    }
});

посмотреть здесь. Я также добавил еще несколько животных. http://jsfiddle.net/A52T8/10/

Я знаю, что немного опоздал на вечеринку, но если вы можете смириться с тем, что линии слева оправданы, один хак должен поставить трубы перед элементами, а затем положить маску над левым краем, в основном так:

li::before {
  content: " | ";
  white-space: nowrap;
}

ul, li {
  display: inline;
}

.mask {
  width:4px;
  position: absolute;
  top:8px; //position as needed
}

более полный пример: http://jsbin.com/hoyaduxi/1/edit

одним из решений является стиль левой границы вот так:

li { display: inline; }
li + li {
  border-left: 1px solid;
  margin-left:.5em;
  padding-left:.5em;
}

однако это может не дать вам желаемых результатов, если все списки обернуты, как в вашем примере. То есть это дало бы что-то вроде:

foo | bar | baz
 | bob | bill
 | judy

я наткнулся на решение сегодня, которое, кажется, не здесь уже и которое, кажется, работает довольно хорошо до сих пор. Принятый ответ не работает как-есть на IE10, но это один делает. http://codepen.io/vithun/pen/yDsjf/ кредит автору конечно!

.pipe-separated-list-container {
  overflow-x: hidden;
}
.pipe-separated-list-container ul {
  list-style-type: none;
  position: relative;
  left: -1px;
  padding: 0;
}
.pipe-separated-list-container ul li {
  display: inline-block;
  line-height: 1;
  padding: 0 1em;
  margin-bottom: 1em;
  border-left: 1px solid;
}

<div class="pipe-separated-list-container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
    <li>Eleven</li>
    <li>Twelve</li>
    <li>Thirteen</li>
    <li>Fourteen</li>
    <li>Fifteen</li>
    <li>Sixteen</li>
    <li>Seventeen</li>
    <li>Eighteen</li>
    <li>Nineteen</li>
    <li>Twenty</li>
    <li>Twenty One</li>
    <li>Twenty Two</li>
    <li>Twenty Three</li>
    <li>Twenty Four</li>
    <li>Twenty Five</li>
    <li>Twenty Six</li>
    <li>Twenty Seven</li>
    <li>Twenty Eight</li>
    <li>Twenty Nine</li>
    <li>Thirty</li>
  </ul>
</div>

да, вам нужно будет использовать псевдо элементы и псевдо селекторы:http://jsfiddle.net/cYky9/

вы можете использовать следующий CSS для решения.

ul li { float: left; }
ul li:before { content: "|"; padding: 0 .5em; }
ul li:first-child:before { content: ""; padding: 0; }

должен работать и на IE8+.