Làm cách nào để ngắt dòng trong CSS?

Hơn nữa, bạn sẽ tìm hiểu tầm quan trọng của ngắt dòng trong CSS và các phương pháp khác nhau mà bạn có thể sử dụng để ngắt dòng

nội dung

• Tại sao tôi nên ngắt dòng trong CSS?
• Thông tin cần biết trước khi sử dụng
• Cách thêm một dòng mới trong CSS
  • – Thuộc tính nội dung CSS với cỡ chữ bằng 0
  • – Khối quay trở lại vận chuyển và khối hiển thị
  • – Trả về vận chuyển và Pre khoảng trắng
  • – Phá vỡ nó trong HTML, Bảo tồn nó trong CSS
  • – Break With Flexbox Direction
  • – Hiển thị khối trên CSS trước phần tử giả
  • – Bảng trưng bày
• Tóm tắt các phương pháp để thêm một dòng mới trong CSS
• Hỗ trợ trình duyệt web
• Phần kết luận

Tại sao tôi nên ngắt dòng trong CSS?

You need to break lines in CSS because you’ll be using CSS solutions. This reduces the reliance on many
tags in your HTML document and improves code readability.

Hơn nữa, nó cũng cho phép bạn cải thiện khả năng đọc văn bản trên các trang web của mình. Điều này dẫn đến trải nghiệm người dùng tốt

Thông tin cần biết trước khi sử dụng

Hầu hết CSS cho ngắt dòng sẽ cần sửa đổi một chút tài liệu HTML của bạn. Những sửa đổi này có thể ở dạng đánh dấu bổ sung hoặc xuống dòng. Trong CSS, bạn có thể thao tác đánh dấu bổ sung để tạo ra điểm dừng cần thiết. Đối với dấu xuống dòng, bạn có thể sử dụng một số giá trị khoảng trắng CSS để bảo quản trên trang web

Cách thêm một dòng mới trong CSS

Bạn sẽ cần sử dụng một số phương pháp để thêm một dòng mới trong CSS. Một số phương pháp này là

• Thuộc tính nội dung CSS với kích thước phông chữ bằng không
• Vận chuyển trở lại và khối hiển thị
• Vận chuyển trở lại và khoảng trắng trước
• Phá vỡ nó trong HTML, bảo quản nó trong CSS
• Đột phá với hướng Flexbox
• Khối hiển thị trên CSS trước phần tử giả
• bảng trưng bày

Hãy cùng xem xét từng phương pháp một cách riêng biệt để hiểu nơi chúng ta có thể sử dụng nó

– Thuộc tính nội dung CSS với cỡ chữ bằng 0

This technique requires that you enclose some HTML content with extra markup. This sets up the extra markup for manipulation in your CSS code. Moreover, you can use the HTML tag for the extra markup.

The next code block shows you how to cause a CSS line break using CSS content property and font size. In addition to this, the CSS manipulates the tag via a pseudo-element. This manipulation causes a CSS content line break, as you’ll see below:

Line break with CSS content and line-height
Dòng này ngắt

This line is not broken. This line breaks

* {
margin: 0;
đệm. 0;
kích thước hộp. hộp viền;
}
body {
hiển thị. grid;
place-items. tâm;
chiều cao. 100vh;
}
chiều rộng {
chính. 50%;
đường viền. 5px solid #61093a;
padding. 2em;
cỡ chữ. 1. 2em;
line-height. 1. 168;
vị trí. họ hàng;
}
. line-break-info {
vị trí. tuyệt đối;
dưới cùng. -3. 2em;
trái. -0. 25em;
phần đệm. 1em;
màu nền. #61093a;
màu. #ffffff;
trọng lượng phông chữ. in đậm;
}
. văn bản-break-điểm. trước {
nội dung. “văn bản ẩn”;
cỡ chữ. 0;
hiển thị. block;
line-height. 0;
}

– Khối quay trở lại vận chuyển và khối hiển thị

Phím “Enter” trên bàn phím của bạn là dấu xuống dòng. Kỹ thuật này cần đánh dấu thêm xung quanh phần mà bạn cần điểm dừng. Với CSS, bạn có thể thao tác đánh dấu bổ sung bằng cách sử dụng phần tử giả CSS

Trong mã CSS, bạn sẽ nhắm mục tiêu một phần tử giả. Trước tiên, bạn sẽ cung cấp mã đại diện cho phím “Enter” làm giá trị của thuộc tính nội dung CSS. Sau đó, bạn thay đổi phần tử giả thành phần tử cấp khối

Bạn sẽ tìm thấy cách tạo ngắt dòng CSS với khối hiển thị và dấu xuống dòng trong khối mã tiếp theo

Line break with carriage return and display: block

This line is not broken. This line breaks

* {
margin: 0;
đệm. 0;
kích thước hộp. hộp viền;
}
body {
hiển thị. grid;
place-items. tâm;
chiều cao. 100vh;
}
chiều rộng {
chính. 50%;
đường viền. 5px solid #1847b7;
padding. 2em;
cỡ chữ. 1. 2em;
line-height. 1. 168;
vị trí. họ hàng;
}
. line-break-info {
vị trí. tuyệt đối;
dưới cùng. -3. 2em;
trái. -0. 25em;
phần đệm. 1em;
màu nền. #1847b7;
màu. #ffffff;
trọng lượng phông chữ. in đậm;
}
. văn bản-break-điểm. trước {
nội dung. ‘a’;
hiển thị. chặn;
}

– Trả về vận chuyển và Pre khoảng trắng

Điều này giống như kỹ thuật “Trả về dòng và khối hiển thị”, nhưng điểm khác biệt ở đây là bạn sử dụng khoảng trắng trước để duy trì việc xuống dòng trên trang web. Do đó, điều này sẽ gây ra hiệu ứng CSS ngắt dòng mạnh

Bạn sẽ tìm thấy chi tiết của phương pháp này trong khối mã tiếp theo. Đừng quên, có một phần đánh dấu bổ sung trong HTML giúp công việc này hoạt động

Line break with carriage return and white-space: pre

This line is not broken. This line breaks

* {
margin: 0;
đệm. 0;
kích thước hộp. hộp viền;
}
body {
hiển thị. grid;
place-items. tâm;
chiều cao. 100vh;
}
chiều rộng {
chính. 50%;
đường viền. 5px solid #111396;
padding. 2em;
cỡ chữ. 1. 2em;
line-height. 1. 168;
vị trí. họ hàng;
}
. line-break-info {
vị trí. tuyệt đối;
dưới cùng. -3. 2em;
trái. -0. 25em;
phần đệm. 1em;
màu nền. #111396;
màu. #ffffff;
trọng lượng phông chữ. in đậm;
}
. văn bản-break-điểm. trước {
nội dung. ‘a’;
khoảng trắng. trước;
}

– Phá vỡ nó trong HTML, Bảo tồn nó trong CSS

Trong kỹ thuật này, bạn sử dụng phím “Enter” trên bàn phím để thêm điểm ngắt trong phần đánh dấu HTML. Trong quá trình triển khai CSS của bạn, bạn giữ nguyên điểm ngắt với dòng trước khoảng trắng. Điều này sẽ gây ra ngắt dòng CSS sau phím “Enter”

Khối mã tiếp theo cho thấy việc sử dụng phương pháp này

Break it in HTML, preserve it in CSS

This line is not broken.
This line breaks

* {
margin: 0;
đệm. 0;
kích thước hộp. hộp viền;
}
body {
hiển thị. grid;
place-items. tâm;
chiều cao. 100vh;
}
chiều rộng {
chính. 50%;
đường viền. 5px solid #b73d18;
padding. 2em;
cỡ chữ. 1. 2em;
line-height. 1. 168;
vị trí. họ hàng;
}
. line-break-info {
vị trí. tuyệt đối;
dưới cùng. -3. 2em;
trái. -0. 25em;
phần đệm. 1em;
màu nền. #b73d18;
màu. #ffffff;
độ dày phông chữ. in đậm;
}
. text-with-line-breaks {
khoảng trắng. dòng trước;
}

– Break With Flexbox Direction

Bạn có thể bọc điểm dừng cần thiết trong HTML của mình bằng cách đánh dấu bổ sung. Sau đó, trong CSS của bạn, hãy làm như sau

• Thiết lập một hộp chứa linh hoạt xung quanh văn bản
• Đặt hướng flex cho một cột

Do đó, tất cả các mục flex sẽ xếp chồng lên nhau, điều này sẽ tạo ra ngắt đoạn CSS

Ngoài ra, bạn sẽ tìm thấy cách triển khai “Break with Flexbox Direction” trong khối mã tiếp theo

< .

This line is not broken. This line breaks

* {
lề. 0;
đệm. 0;
kích thước hộp. hộp viền;
}
body {
hiển thị. grid;
place-items. tâm;
chiều cao. 100vh;
}
chiều rộng {
chính. 50%;
đường viền. 5px solid #5118b7;
padding. 2em;
cỡ chữ. 1. 2em;
line-height. 1. 168;
vị trí. họ hàng;
}
. line-break-info {
vị trí. tuyệt đối;
dưới cùng. -3. 2em;
trái. -0. 25em;
phần đệm. 1em;
màu nền. #5118b7;
màu. #ffffff;
trọng lượng phông chữ. in đậm;
}
. text-with-line-breaks {
hiển thị. flex;
flex-direction. cột;
}

– Hiển thị khối trên CSS trước phần tử giả

Phương pháp này yêu cầu bạn có thêm đánh dấu xung quanh các điểm ngắt đã chọn trong HTML của bạn. Ngoài ra, trong mã CSS của bạn, bạn thực hiện như sau trên phần tử giả trước của các điểm dừng này

• Sử dụng thuộc tính nội dung CSS để chỉ định nội dung của nó dưới dạng một chuỗi trống
• Thay đổi phần tử giả trước thành phần tử cấp khối

Đây là những yêu cầu đối với phương pháp này và vì vậy bạn sẽ tìm thấy chi tiết triển khai trong khối mã tiếp theo

Line Break with Block level on CSS before

This line is not broken. This line breaks

* {
margin: 0;
đệm. 0;
kích thước hộp. hộp viền;
}
body {
hiển thị. grid;
place-items. tâm;
chiều cao. 100vh;
}
chiều rộng {
chính. 50%;
đường viền. 5px solid #b71854;
padding. 2em;
cỡ chữ. 1. 2em;
line-height. 1. 168;
vị trí. họ hàng;
}
. line-break-info {
vị trí. tuyệt đối;
dưới cùng. -3. 2em;
trái. -0. 25em;
phần đệm. 1em;
màu nền. #b71854;
màu. #ffffff;
trọng lượng phông chữ. in đậm;
}
. text-break-point {
nội dung. “”;
hiển thị. chặn;
}

– Bảng trưng bày

Kỹ thuật này phù hợp với mô hình của các kỹ thuật trước đó. Ngoài ra, đối với các điểm dừng bạn đã chọn, hãy thay đổi thuộc tính hiển thị CSS của chúng thành một bảng

Khối mã tiếp theo cho biết cách sử dụng phương thức bảng hiển thị một cách hiệu quả, vì vậy hãy tự chạy nó và xem nó hoạt động như thế nào

.

This line is not broken. This line breaks

* {
margin: 0;
đệm. 0;
kích thước hộp. hộp viền;
}
body {
hiển thị. grid;
place-items. tâm;
chiều cao. 100vh;
}
chiều rộng {
chính. 50%;
đường viền. 5px solid #8208d5;
padding. 2em;
cỡ chữ. 1. 2em;
line-height. 1. 168;
vị trí. họ hàng;
}
. line-break-info {
vị trí. tuyệt đối;
dưới cùng. -3. 2em;
trái. -0. 25em;
phần đệm. 1em;
màu nền. #8208d5;
màu. #ffffff;
trọng lượng phông chữ. in đậm;
}
. text-break-point {
hiển thị. bảng;
}

Tóm tắt các phương pháp để thêm một dòng mới trong CSS

Sau đây là danh sách tóm tắt các phương pháp để thêm một dòng mới trong CSS

• In your HTML, you should enclose the breakpoints with extra markup. For example, you can make use of a tag.
• Để ngắt dòng, bạn có thể thao tác với phần tử giả CSS của phần đánh dấu bổ sung

Hỗ trợ trình duyệt web

Tất cả các trình duyệt web hiện đại đều hỗ trợ các phương pháp được thảo luận trong bài viết này

Phần kết luận

Chúng tôi đã đề cập rất nhiều về ngắt dòng CSS. Đây là một bản tóm tắt của tất cả mọi thứ mà bạn đã học

• CSS line break incorporates CSS solutions. This reduces relying on many
  tags in your HTML
• Ngắt dòng CSS cải thiện khả năng đọc văn bản trên các trang web của bạn
• Ngắt dòng CSS có thể cần đánh dấu bổ sung nhỏ trong HTML của bạn
• Một số phương pháp bạn có thể sử dụng để ngắt dòng CSS là Break with Flexbox Direction và Display Table
• Các phương pháp ngắt dòng CSS yêu cầu ít đánh dấu trong HTML của bạn. Bạn có thể định kiểu đánh dấu bằng phần tử giả để tạo ngắt dòng
• Hầu hết các trình duyệt web đều hỗ trợ các phương thức sẽ gây ngắt dòng CSS

Việc áp dụng ngắt dòng CSS sẽ mang đến cho người dùng trang web của bạn trải nghiệm đọc tốt. Bây giờ bạn đã biết cách thực hiện, bạn đã sẵn sàng nâng cao kỹ năng thiết kế web của mình

5/5 - (18 phiếu)

• Tác giả
• Bài viết gần đây

Vị trí là tất cả

Vị trí là tất cả. Tài nguyên Go-To của bạn để Tìm hiểu & Xây dựng. CSS, JavaScript, HTML, PHP, C++ và MYSQL