Thêm dấu phân tách sau các mục trong danh sách không có thứ tự trừ khi mục đó là mục cuối cùng trên một dòng

Có thể tạo kiểu html này không ...

<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>

... như thế này ...

... mà không cần thêm lớp vào các mục danh sách cụ thể hoặc sử dụng javascript? Và nếu vậy thì làm thế nào?

Các ngắt dòng không cố định; danh sách mở rộng để chiếm thêm không gian và các mục trong danh sách được căn giữa.

Điều này bây giờ có thể với flex-box

Chìa khóa của kỹ thuật này:

• Một phần tử vùng chứa được đặt thành overflow: hidden.
• Đặt justify-content: space-betweentrên ul(là hộp uốn) để buộc các mục uốn của nó kéo căng sang các cạnh bên trái và bên phải.
• Đặt margin-left: -1pxtrên ulđể làm cho cạnh trái của nó tràn vào thùng chứa.
• Đặt border-left: 1pxtrên các mục lilinh hoạt.

Vùng chứa hoạt động như một mặt nạ ẩn các đường viền của bất kỳ mục linh hoạt nào chạm vào cạnh trái của nó.

.flex-list {
    position: relative;
    margin: 1em;
    overflow: hidden;
}
.flex-list ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: -1px;
}
.flex-list li {
    flex-grow: 1;
    flex-basis: auto;
    margin: .25em 0;
    padding: 0 1em;
    text-align: center;
    border-left: 1px solid #ccc;
    background-color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet"/>
<div class="flex-list">
    <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>
</div>

Chỉ

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

Tất nhiên, điều này không thực sự giải quyết được vấn đề của OP. Anh ta muốn lướt qua các thanh dọc ở đầu và cuối dòng tùy thuộc vào vị trí chúng bị hỏng. Tôi sẽ đi ra ngoài và khẳng định rằng vấn đề này không thể giải quyết được bằng cách sử dụng CSS và thậm chí không bằng JS trừ khi người ta muốn viết lại về cơ bản logic đo lường / bố cục / ngắt dòng của công cụ trình duyệt.

Phần CSS duy nhất, theo như tôi thấy, "biết" về ngắt dòng, trước tiên, là ::first-linephần tử giả, không giúp ích được gì cho chúng ta ở đây - trong mọi trường hợp, nó bị giới hạn ở một vài thuộc tính trình bày và không hoạt động cùng với những thứ như :: trước và :: sau. Khía cạnh khác duy nhất của CSS mà tôi có thể nghĩ đến ở một mức độ nào đó cho thấy việc ngắt dòng là dấu gạch nối. Tuy nhiên, gạch nối chỉ là thêm một ký tự (thường là dấu gạch ngang) vào cuối dòng trong một số tình huống nhất định, trong khi ở đây chúng tôi lo lắng về việc xóa một ký tự (dòng dọc), vì vậy tôi không thể biết cách áp dụng bất kỳ loại nào logic liên quan đến dấu gạch nối, ngay cả khi có sự trợ giúp của các thuộc tính như hyphenate-character.

Chúng ta có thuộc word-spacingtính, được áp dụng trong dòng nhưng không phải ở đầu và cuối dòng, có vẻ hứa hẹn, nhưng nó xác định độ rộng của khoảng cách giữa các từ chứ không phải (các) ký tự sẽ được sử dụng.

Người ta tự hỏi liệu có cách nào đó để sử dụng thuộc text-overflowtính, có khả năng ít được biết đến để nhận hai giá trị để hiển thị văn bản tràn ở cả bên trái và bên phải, như trong

text-overflow: '' '';

nhưng dường như không có bất kỳ cách rõ ràng nào để đi từ A đến B ở đây.

Trước khi hiển thị mã, điều đáng nói là IE8 có hỗ trợ :first-childnhưng không :last-child, vì vậy trong các tình huống tương tự, bạn nên sử dụng lớp :first-childgiả.

Bản giới thiệu

#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>

Sử dụng :afterbộ chọn giả. Hãy xem 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; }

BIÊN TẬP:

giải pháp 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;
    }
});

Hãy xem ở đây. Tôi cũng thêm một vài con vật nữa. http://jsfiddle.net/A52T8/10/

Tôi biết mình đến bữa tiệc hơi muộn, nhưng nếu bạn có thể chấp nhận việc để các dòng được căn trái, một mẹo là đặt các đường ống trước các mục và sau đó đặt một chiếc mặt nạ lên trên cạnh trái, về cơ bản như vậy:

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

ul, li {
  display: inline;
}

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

ví dụ đầy đủ hơn: http://jsbin.com/hoyaduxi/1/edit

Một giải pháp là tạo kiểu cho đường viền bên trái như vậy:

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

Tuy nhiên, điều này có thể không mang lại cho bạn kết quả mong muốn nếu toàn bộ danh sách kết thúc, giống như trong ví dụ của bạn. Tức là nó sẽ cung cấp một cái gì đó như:

foo | bar | baz
 | bob | bill
 | judy

Tôi đã tìm thấy một giải pháp ngày hôm nay dường như chưa có ở đây và có vẻ như hoạt động khá tốt cho đến nay. Câu trả lời được chấp nhận không hoạt động như trên IE10 nhưng câu trả lời này thì có. http://codepen.io/vithun/pen/yDsjf/ ghi nhận tác giả của khóa học!

.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>

Phiên bản SCSS được sửa đổi một chút cho phép bạn kiểm soát |kích thước đường ống và sẽ loại bỏ phần đệm khỏi các mục danh sách đầu tiên và cuối cùng trong khi vẫn tôn trọng đường viền.

$pipe-list-height: 20px;
$pipe-list-padding: 15px;

.pipe-list {
    position: relative;
    overflow: hidden;
    height: $pipe-list-height;

    > ul {
        display: flex;
        flex-direction: row;

        > li {
            position: relative;
            padding: 0 $pipe-list-padding;

            &:after {
                content: " ";
                position: absolute;
                border-right: 1px solid gray;
                top: 10%;
                right: 0;
                height: 75%;
                margin-top: auto;
                margin-bottom: auto;
            }

            &:first-child {
                padding-left: 0;
            }

            &:last-child {
                padding-right: 0;

                &:after {
                    border-right: none;
                }
            }
        }
    }
}

<div class="pipe-list">
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
  </ul>
</div>

Có, bạn sẽ cần sử dụng phần tử giả VÀ bộ chọn giả: http://jsfiddle.net/cYky9/

Bạn có thể sử dụng CSS sau để giải quyết.

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

Cũng nên hoạt động trên IE8 +.