Bạn sẽ thấy rằng hai câu không ngắt dòng được hiển thị mặc dù chúng được viết trên các dòng riêng biệt. Nhưng không thành vấn đề vì mỗi nhịp được hiển thị trên cùng một dòng

Ví dụ 2.
Có một thuộc tính CSS được áp dụng cho nội dung HTML để thêm các dấu ngắt trong đó. Đó là ký tự xuống dòng (\A). Nó được chia thành hai yếu tố đó là “. trước và ". after” các phần tử giả được đề cập bên trong các lớp CSS.

Đây là hiệu ứng được áp dụng trong cả hai phần tử hoặc bằng cách sử dụng bất kỳ phần tử nào trong số chúng. Lúc đầu, chúng tôi sử dụng phần tử sau cho văn bản. Hãy xem nó hoạt động như thế nào

Trong phần nội dung, cùng một nội dung được sử dụng làm tiêu đề và sau đó hai thẻ span được áp dụng. Lần này, một id cho CSS được đề cập bên trong thẻ span. Id này áp dụng tất cả các hiệu ứng được khai báo bên trong phần đầu của phần thân HTML. Bây giờ, đóng cơ thể. Trong phần đầu, hãy sử dụng các thẻ kiểu để tạo CSS bên trong. Bên trong các thẻ, hãy sử dụng id được áp dụng và làm theo “. after” loại ký tự xuống dòng. Bên trong phần mô tả id này, chúng tôi sử dụng thuộc tính nội dung chỉ có ký tự “\a”. Nó không gây ra gì ngoài một dòng mới cho văn bản hiện có. Bằng cách sử dụng điều này, cả hai câu được hiển thị trên các dòng riêng biệt. Một thuộc tính khác được viết trong phần mô tả là “khoảng trắng”. Khoảng trắng này luôn được lấy ở dạng nhập trước

#content1. sau {
Nội dung. "\a";
Khoảng trắng. trước;

Id kiểu này ảnh hưởng đến nội dung nhịp theo cách mà hai câu không được hiển thị trên cùng một dòng. Yếu tố “after” gây ngắt dòng giữa hai câu. Đúng như tên gọi của nó, dấu ngắt nằm sau dòng đầu tiên

Lưu mã và thực thi nó trong trình duyệt để xem trang web kết quả được tạo

Bạn sẽ thấy rằng theo cách này, chúng tôi đã tạo một dòng mới bằng cách sử dụng thuộc tính CSS

Ví dụ 3.
Trong ví dụ này, chúng ta sẽ sử dụng cả hai phần tử của ký tự xuống dòng. Để phần nội dung HTML giống như trong ví dụ trước nhưng với một thay đổi duy nhất bằng cách thêm id content2 bên trong thẻ của nhịp thứ hai. Điều này gây ra hiệu ứng trên cả hai thẻ span. Chỉ có thay đổi trong các thẻ phong cách của phần đầu. Id content1 cũng giống như vậy khi có phần tử “after” bên trong nó.

Nhưng id content2 có phần tử “trước” của ký tự với nó

#content2. trước {
Nội dung . "\a" ;
Khoảng trắng. trước;
}

Như mô tả kiểu hiển thị, phần tử trước được áp dụng cho nhịp thứ hai. Ở nhịp đầu tiên, chúng tôi đã áp dụng id conent1. Do id nội dung1, không gian được tạo sau khoảng đầu tiên. Nhưng do id nội dung2 có phần tử “trước” nên nhịp thứ hai có một dòng mới trước câu thứ hai. Điều này là do phần tử “trước” được khai báo trong id content2

Khi thực hiện, bạn sẽ thấy giữa hai câu có khoảng cách một dòng trống. Hiệu ứng “sau” được áp dụng bởi id nội dung1 đầu tiên, trong khi hiệu ứng “trước” được áp dụng chung bởi id nội dung2

Ví dụ 4.
Một ví dụ khác về dòng CSS mới được khai báo ở đây liên quan đến việc sử dụng thuộc tính CSS trong đó hiệu ứng khoảng trắng được cung cấp một giá trị của dòng trước. Giá trị đầu dòng này tạo ra một khoảng cách trước nội dung HTML mà nó được áp dụng. Bây giờ, chúng ta hãy xem xét ví dụ sau.

In the body section of the HTML, two headings,

and

, are given. After these headings, a paragraph is declared with each word in a separate line.

Bây giờ, trong phần đầu, sau khi đặt tiêu đề cho trang, một CSS bên trong được áp dụng để có thẻ kiểu. Bên trong thẻ kiểu, chúng tôi sử dụng thẻ đoạn văn để áp dụng màu phông chữ cho văn bản cùng với thuộc tính khoảng trắng

P ​​ {
Màu . cam;
Khoảng trắng. dòng trước;
}

Mã "dòng trước" này tạo ra một dòng trống trước khi đoạn văn bắt đầu

Khi thực hiện, bạn sẽ thấy khoảng trống được tạo trước khi đoạn văn bắt đầu

Ví dụ 5.
Ví dụ này khá khác so với các ví dụ trước vì chúng ta sẽ không chỉ sử dụng một dòng mới trống ở đây mà còn thêm văn bản mới vào các dòng mới được tạo trước đó. Trong phần nội dung, hai tiêu đề được tạo –

Bên trong phần đầu, chúng tôi sử dụng một đoạn văn cho mục đích tạo kiểu

P. trước {
Màu . Đỏ;
Nội dung . "Linuxhint \A"
  "Bài viết về ngắt dòng" ;
Display: block;
Khoảng trắng. trước }

Hiệu ứng này bao gồm màu chữ và nội dung mà chúng ta muốn thêm vào từng đoạn sau khi thêm dòng trống. Thuộc tính khoảng trắng được gán giá trị “pre” để thêm khoảng trống trước đoạn văn

Lưu mã và thực thi tệp. Bạn sẽ thấy rằng trước mỗi đoạn, một dòng trống được thêm vào và sau đó, nội dung được thêm vào sau khoảng trống

Phần kết luận

Dòng CSS mới là mô tả về việc tạo một dòng mới bằng cách sử dụng một số tính năng của CSS được khai báo với bất kỳ tính năng HTML nào. Thông qua các hiệu ứng CSS, một dòng mới có thể được thêm vào trước, sau hoặc giữa các nội dung HTML. Chúng tôi đã triển khai các ví dụ khác nhau để giải thích ngắn gọn về khái niệm này. Khi bắt đầu, một ví dụ về đoạn HTML không có khoảng trắng được sử dụng. Sau đó, bằng cách sử dụng cùng một mã, chúng tôi đã thêm thuộc tính CSS của ký tự. Một “ký tự xuống dòng” được sử dụng để thêm các dòng mới giữa các nội dung mà chúng ta khai báo trong phần thân HTML. Ký tự này có thể được thêm trực tiếp hoặc cùng với nội dung mới được thêm vào