Hướng dẫn css comma separated list - css danh sách được phân tách bằng dấu phẩy

Question

Gần đây tôi đã viết blog về cách tạo kiểu danh sách sọc trong CSS. Lần này, tôi muốn xem cách tạo kiểu cho một danh sách phân tách bằng dấu phẩy. Đây là một tính năng khác tôi cần cho blog của mình viết lại để hiển thị danh sách các danh mục mà mỗi bài đăng đã được thực hiện.

Nội dung chính Show

Làm thế nào để bạn chia một chuỗi trong HTML?
Phần tử HTML tạo ra một đường ngắt trong văn bản (trở lại vận chuyển). HTML element produces a line break in text (carriage-return).
Chuyển đổi chuỗi phân tách bằng dấu phẩy thành mảng #
Chúng tôi đã chuyển một dấu phẩy và một không gian làm phân tách cho phương pháp
Nếu bạn muốn nhận một mảng trống khi chuỗi trống, bạn có thể chuỗi cuộc gọi
Hàm chúng tôi đã chuyển sang phương thức
.comma-list li { display: inline; } 55 trả về một mảng chỉ chứa các phần tử thỏa mãn điều kiện trong hàm.
'Hello, cruel , world!'.split(/\s*,\s*/); //-> ["Hello", "cruel", "world!"] 6 nếu phần tử không bằng một chuỗi trống.

Giả sử tôi có danh sách các danh mục chứa HTML sau:

Posted in:

  Azure
  CSS
  C#

(8th Jan 2018)

Theo mặc định sẽ trông như thế này:

Chúng tôi muốn đưa tất cả điều này vào một dòng với dấu phẩy giữa các danh mục. Vì vậy, trước hết, chúng tôi sẽ đặt lại kiểu dáng mặc định bằng cách tắt

.comma-list li {
  display: inline;
}

7 và đặt

.comma-list li {
  display: inline;
}

8 thành 0. Chúng tôi cũng sẽ đặt

.comma-list li {
  display: inline;
}

9 để nó được hiển thị trên cùng một dòng với "Đăng trong:".

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

Chúng tôi cũng cần đặt các mục danh sách thành

.comma-list li {
  display: inline;
}

9 để đưa mọi thứ vào một dòng duy nhất

.comma-list li {
  display: inline;
}

Bây giờ nó trông như thế này:

Hướng dẫn css comma separated list - css danh sách được phân tách bằng dấu phẩy

Bây giờ chúng ta đang đến gần, nhưng tất nhiên không có dấu phẩy giữa các mặt hàng. Chúng ta có thể chèn chúng bằng cách sử dụng bộ chọn CSS

.comma-list li::after {
  content: ", ";
}

1 để đặt dấu phẩy (và một không gian) sau mỗi mục danh sách:

.comma-list li::after {
  content: ", ";
}

Điều này mang lại cho chúng tôi gần như những gì chúng tôi cần, nhưng bây giờ chúng tôi có một dấu phẩy sau khi loại cuối cùng:

Chúng ta có thể thoát khỏi dấu phẩy theo dõi bằng cách kết hợp bộ chọn

.comma-list li::after {
  content: ", ";
}

1 với bộ chọn

.comma-list li::after {
  content: ", ";
}

3:

.comma-list li:last-child::after {
    content: "";
}

Và chúng tôi nhận được hiệu ứng mong muốn:

Một lần nữa, tôi chắc chắn rằng đây là tất cả các chuyên gia CSS rất cơ bản, nhưng nó mới đối với tôi. Bạn có thể chơi với một ví dụ đầy đủ trên Codepen.

Chuyển đổi chuỗi phân tách bằng dấu phẩy thành mảng số trong jsPrev|Next

Cách kết hợp hai số trong JavaScriptShow

Làm thế nào để bạn chia một chuỗi trong HTML?
Phần tử HTML tạo ra một đường ngắt trong văn bản (trở lại vận chuyển). HTML element produces a line break in text (carriage-return).
Chuyển đổi chuỗi phân tách bằng dấu phẩy thành mảng #
Chúng tôi đã chuyển một dấu phẩy và một không gian làm phân tách cho phương pháp

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2. Bây giờ các chuỗi trong mảng không có không gian hàng đầu.

Hàm chúng tôi đã chuyển sang phương thức
```
.comma-list li {
  display: inline;
}
```
55 trả về một mảng chỉ chứa các phần tử thỏa mãn điều kiện trong hàm.

'Hello, cruel , world!'.split(/\s*,\s*/);
//-> ["Hello", "cruel", "world!"]

6 nếu phần tử không bằng một chuỗi trống.

Làm thế nào để bạn chia một chuỗi trong HTML?

Phần tử HTML tạo ra một đường ngắt trong văn bản (trở lại vận chuyển). HTML element produces a line break in text (carriage-return).

Làm thế nào để bạn tách một mảng với dấu phẩy?

Danh sách phân tách bằng dấu phẩy có thể được tạo bằng cách sử dụng hàm Implode ().Ilifrode () là một hàm tích hợp trong PHP và được sử dụng để tham gia các phần tử của một mảng.Imptrode () là bí danh cho PHP |Chức năng tham gia () và hoạt động giống hệt như hàm tham gia ().by using implode() function. The implode() is a builtin function in PHP and is used to join the elements of an array. implode() is an alias for PHP | join() function and works exactly same as that of join() function.

Làm thế nào để bạn chuyển đổi một chuỗi được phân tách bằng dấu phẩy thành một mảng?

Phần tử HTML tạo ra một đường ngắt trong văn bản (trở lại vận chuyển). HTML element produces a line break in text (carriage-return).

Làm thế nào để bạn tách một mảng với dấu phẩy?

Danh sách phân tách bằng dấu phẩy có thể được tạo bằng cách sử dụng hàm Implode ().Ilifrode () là một hàm tích hợp trong PHP và được sử dụng để tham gia các phần tử của một mảng.Imptrode () là bí danh cho PHP |Chức năng tham gia () và hoạt động giống hệt như hàm tham gia ().by using implode() function. The implode() is a builtin function in PHP and is used to join the elements of an array. implode() is an alias for PHP | join() function and works exactly same as that of join() function.
Cách xóa các giá trị trùng lặp khỏi mảng JavaScript
Cách hiển thị tất cả các mục hoặc giá trị trong một mảng sử dụng vòng lặp trong jQuery

Hai xu của tôi, thêm trang trí để loại bỏ các khoảng trắng ban đầu còn lại trong câu trả lời của SAC.

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

Edit:

Sau khi nhận được một số upvote về câu trả lời này, tôi muốn xem lại điều này. Nếu bạn muốn phân chia trên dấu phẩy và thực hiện thao tác trang trí, bạn có thể thực hiện nó trong một cuộc gọi phương thức mà không có bất kỳ vòng lặp rõ ràng nào do thực tế là

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2 cũng sẽ lấy biểu thức thông thường làm đối số:

'Hello, cruel , world!'.split(/\s*,\s*/);
//-> ["Hello", "cruel", "world!"]

Tuy nhiên, giải pháp này sẽ không cắt giảm phần đầu của mục đầu tiên và kết thúc của mục cuối cùng thường không phải là vấn đề.

Và vì vậy, để trả lời câu hỏi liên quan đến việc xử lý trong một vòng lặp, nếu trình duyệt mục tiêu của bạn hỗ trợ các tính năng bổ sung của ES5 như các phương thức

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

3 hoặc

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

4, thì bạn chỉ có thể làm như sau:

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

2

Chuyển đổi chuỗi phân tách bằng dấu phẩy thành mảng #

Sử dụng phương thức

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

35 để chuyển đổi chuỗi phân tách bằng dấu phẩy thành một mảng, ví dụ:

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

6. Phương thức

.comma-list li::after {
  content: ", ";
}

4 sẽ phân chia chuỗi trên mỗi lần xuất hiện của dấu phẩy và sẽ trả về một mảng chứa kết quả.5 để chuyển đổi chuỗi phân tách bằng dấu phẩy thành một mảng, ví dụ:
var str = 'Hello, World, etc'; var str_array = str.split(','); for(var i = 0; i < str_array.length; i++) { // Trim the excess whitespace. str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, ""); // Add additional code here, such as: alert(str_array[i]); }
6. Phương thức
.comma-list li::after { content: ", "; }
4 sẽ phân chia chuỗi trên mỗi lần xuất hiện của dấu phẩy và sẽ trả về một mảng chứa kết quả.

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

5

Nếu chuỗi của bạn có khoảng trắng sau dấu phẩy, hãy cuộn xuống đoạn mã tiếp theo.

Chúng tôi đã sử dụng phương thức String.Split để chia một chuỗi thành một mảng.

Đối số duy nhất chúng tôi chuyển sang phương thức là một dấu phân cách. Các dấu phân cách trong đó mỗi lần phân chia nên xảy ra.

Phương thức

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2 trả về một mảng chứa các chuỗi phân chia.

Tuy nhiên, các từ trong chuỗi của bạn có thể được phân tách bằng dấu phẩy và một không gian:

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

7

Trong kịch bản này, chúng tôi phải cập nhật tham số mà chúng tôi chuyển sang phương thức

.comma-list li::after {
  content: ", ";
}

4:

.comma-list {
  display: inline;
  list-style: none;
  padding: 0px;
}

8

Chúng tôi đã chuyển một dấu phẩy và một không gian làm phân tách cho phương pháp

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2. Bây giờ các chuỗi trong mảng không có không gian hàng đầu.

Nếu phương thức

.comma-list li::after {
  content: ", ";
}

4 được gọi trên một chuỗi trống, nó sẽ trả về một mảng chứa một chuỗi trống và không phải là một mảng trống.

.comma-list li {
  display: inline;
}

0

Nếu bạn muốn nhận một mảng trống khi chuỗi trống, bạn có thể chuỗi cuộc gọi

'Hello, cruel , world!'.split(/\s*,\s*/);
//-> ["Hello", "cruel", "world!"]

2 theo phương thức

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2.

.comma-list li {
  display: inline;
}

3

Hàm chúng tôi đã chuyển sang phương thức

'Hello, cruel , world!'.split(/\s*,\s*/);
//-> ["Hello", "cruel", "world!"]

2 được gọi với mỗi phần tử trong mảng.

Phương thức

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2 trả về một mảng chứa các chuỗi phân chia.5 trả về một mảng chỉ chứa các phần tử thỏa mãn điều kiện trong hàm.

Tuy nhiên, các từ trong chuỗi của bạn có thể được phân tách bằng dấu phẩy và một không gian:

Trong kịch bản này, chúng tôi phải cập nhật tham số mà chúng tôi chuyển sang phương thức

.comma-list li::after {
  content: ", ";
}

4:

Chúng tôi đã chuyển một dấu phẩy và một không gian làm phân tách cho phương pháp

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2. Bây giờ các chuỗi trong mảng không có không gian hàng đầu.

Nếu phương thức
```
.comma-list li::after {
  content: ", ";
}
```
4 được gọi trên một chuỗi trống, nó sẽ trả về một mảng chứa một chuỗi trống và không phải là một mảng trống.

Nếu bạn muốn nhận một mảng trống khi chuỗi trống, bạn có thể chuỗi cuộc gọi

'Hello, cruel , world!'.split(/\s*,\s*/);
//-> ["Hello", "cruel", "world!"]

2 theo phương thức

var str = 'Hello, World, etc';
var str_array = str.split(',');

for(var i = 0; i < str_array.length; i++) {
   // Trim the excess whitespace.
   str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
   // Add additional code here, such as:
   alert(str_array[i]);
}

2.

.comma-list li {
  display: inline;
}

3
HTML element produces a line break in text (carriage-return).

Hàm chúng tôi đã chuyển sang phương thức

'Hello, cruel , world!'.split(/\s*,\s*/);
//-> ["Hello", "cruel", "world!"]

2 được gọi với mỗi phần tử trong mảng.by using implode() function. The implode() is a builtin function in PHP and is used to join the elements of an array. implode() is an alias for PHP | join() function and works exactly same as that of join() function.

.comma-list li { display: inline; } 55 trả về một mảng chỉ chứa các phần tử thỏa mãn điều kiện trong hàm.

Chúng tôi không muốn mảng chứa các chuỗi trống, vì vậy chúng tôi chỉ trả về split() method to convert a comma separated string to an array, e.g. const arr = str. split(',') . The split() method will split the string on each occurrence of a comma and will return an array containing the results.

'Hello, cruel , world!'.split(/\s,\s/); //-> ["Hello", "cruel", "world!"] 6 nếu phần tử không bằng một chuỗi trống.

Đọc thêm #

programming css Add comma css Comma in CSS Tagsinput clear jQuery tags input Bootstrap-tagsinput disable JavaScript tags input

Hướng dẫn css comma separated list - css danh sách được phân tách bằng dấu phẩy

Làm thế nào để bạn chia một chuỗi trong HTML?

Phần tử HTML tạo ra một đường ngắt trong văn bản (trở lại vận chuyển). HTML element produces a line break in text (carriage-return).

Edit:

Chuyển đổi chuỗi phân tách bằng dấu phẩy thành mảng #

Chúng tôi đã chuyển một dấu phẩy và một không gian làm phân tách cho phương pháp

Nếu bạn muốn nhận một mảng trống khi chuỗi trống, bạn có thể chuỗi cuộc gọi

Hàm chúng tôi đã chuyển sang phương thức

.comma-list li { display: inline; } 55 trả về một mảng chỉ chứa các phần tử thỏa mãn điều kiện trong hàm.

'Hello, cruel , world!'.split(/\s*,\s*/); //-> ["Hello", "cruel", "world!"] 6 nếu phần tử không bằng một chuỗi trống.

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

'Hello, cruel , world!'.split(/\s,\s/); //-> ["Hello", "cruel", "world!"] 6 nếu phần tử không bằng một chuỗi trống.