Cách ngăn ngắt dòng bằng CSS

Các nhà phát triển thường thích bọc văn bản trên một trang web. Bao bọc hạn chế văn bản theo cách này hay cách khác và ngăn chặn các vấn đề thiết kế. Gói văn bản cũng có thể ngăn cuộn ngang. Nhưng có những lúc bạn muốn các khối văn bản nằm trên cùng một dòng, dù độ dài. Bạn có thể ngăn ngắt dòng và ngắt dòng cho các phần tử cụ thể bằng cách sử dụng thuộc tính khoảng white-space CSS .

Trong hướng dẫn này, bạn sẽ tạo kiểu cho cùng một khối văn bản theo bốn cách khác nhau, đầu tiên là ngắt dòng và sau đó ba lần không ngắt dòng:

Medusafish dải cá killifish convict blenny cá thu đao threadail beluga cá tầm. Cá hồi mul mora cisco masu Ấn Độ, cá hồi dậu, cá mập cầu longnose lancetfish bluefish cá hồng đỏ Sacramento splittail khổng lồ danio.

Điều này sẽ cung cấp cho bạn một số tùy chọn để gói hoặc không gói văn bản của bạn.

Yêu cầu

Để hoàn thành hướng dẫn này, bạn cần :

Editor mã do bạn chọn, chẳng hạn như nano hoặc Visual Studio Code
Một trình duyệt web
Một sự thoải mái với các nguyên tắc cơ bản về HTML. Bạn có thể xem loạt bài hướng dẫn Cách Xây dựng Trang web bằng HTML để được giới thiệu.

Bước 1 - Tạo Style Sheet

Trong bước này, bạn sẽ tạo một style sheet với ba lớp khác nhau. Mỗi cái sẽ xử lý ngắt dòng khác nhau.

Trước tiên, hãy tạo và mở một file mới có tên là main.css bằng nano hoặc trình soạn thảo bạn muốn :

nano main.css

Thêm nội dung sau, sẽ giới thiệu ba lớp CSS sử dụng một số thuộc tính, bao gồm khoảng white-space :

./main.css

.sammy-wrap {     border-radius: 6px;     background-color: aliceblue;     border: 2px dashed gray;     max-width: 70%;     padding: 1em;     margin-bottom: .4em; } .sammy-nowrap-1 {     border-radius: 6px;     background-color: aliceblue;     border: 2px dashed gray;     max-width: 70%;     padding: 1em;     margin-bottom: .4em;     white-space: nowrap; } .sammy-nowrap-2 {     border-radius: 6px;     background-color: aliceblue;     border: 2px dashed gray;     max-width: 70%;     padding: 1em;     margin-bottom: .4em;     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; }

Lớp đầu tiên của bạn là .sammy-wrap . Nó xác định sáu thuộc tính CSS phổ biến bao gồm border-radius border max-width , background-color , border max-width , phần padding và margin-bottom . Lớp này sẽ tạo một hộp trực quan, nhưng nó không xác định bất kỳ thuộc tính gói đặc biệt nào. Điều này nghĩa là nó sẽ ngắt dòng theo cách mặc định.

Lớp thứ hai của bạn là .sammy-nowrap-1 . Nó định nghĩa cùng một hộp với .sammy-wrap nhưng bây giờ bạn thêm một thuộc tính khác: white-space . Thuộc tính white-space có nhiều tùy chọn, tất cả đều xác định cách xử lý khoảng trắng bên trong một phần tử nhất định. Ở đây, bạn đã đặt khoảng white-space thành nowrap , điều này sẽ ngăn tất cả các ngắt dòng.

Lớp thứ ba của bạn là .sammy-nowrap-2 . Nó thêm khoảng white-space và hai thuộc tính bổ sung: overflow và overflow text-overflow . Thuộc tính overflow xử lý scrollable overflow , xảy ra khi nội dung bên trong một phần tử vượt ra ngoài các cạnh của phần tử đó. Thuộc tính overflow có thể làm cho nội dung đó có thể cuộn, hiển thị hoặc ẩn. Bạn đang đặt overflow thành hidden và sau đó sử dụng thuộc text-overflow để thêm nhiều tùy chỉnh hơn nữa. text-overflow có thể giúp bạn báo hiệu cho user biết rằng văn bản bổ sung vẫn bị ẩn. Bạn đã đặt giá trị này thành ellipsis , vì vậy bây giờ dòng của bạn sẽ không bị đứt đoạn cũng không kéo dài ra ngoài hộp. CSS sẽ ẩn phần tràn và báo hiệu nội dung ẩn bằng dấu ...

Lưu file của bạn.

Đến đây bạn đã có một biểu định kiểu, bạn đã sẵn sàng tạo một file HTML ngắn với một số văn bản mẫu. Sau đó, bạn sẽ tải trang web trong trình duyệt và kiểm tra cách CSS có thể ngăn ngắt dòng.

Bước 2 - Tạo file HTML

Với các lớp CSS của bạn được xác định, bạn có thể áp dụng chúng cho một số văn bản mẫu.

Tạo và mở một file có tên là index.html trong trình soạn thảo bạn muốn . Đảm bảo đặt nó trong cùng một folder với main.css :

nano index.html

Thêm nội dung sau, nội dung này sẽ liên kết main.css làm biểu stylesheet của bạn và sau đó áp dụng các lớp của bạn vào một khối văn bản mẫu:

./index.html

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>How To Prevent Line Breaks with CSS</title> <link href="main.css" rel="stylesheet"> </head>  <body> <p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>  <p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>  <p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>  <p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p> </body> </html>

Bạn đã chỉ định phong cách gói tiêu chuẩn của bạn để khối văn bản đầu tiên, bạn nowrap phong cách đến thứ hai, và nowrap được hidden với ellipsis đến thứ ba. Bạn đã gán sammy-wrap cho mẫu thứ tư, nhưng bạn đang overrides gói mặc định bằng cách chèn trực tiếp khoảng trắng không ngắt (   ) vào HTML. Nếu bạn cần ngăn ngắt dòng chỉ là tình huống xảy ra một lần, thì khoảng trắng không ngắt dòng có thể cung cấp một giải pháp nhanh chóng.

Mở index.html trong trình duyệt web và xem kết quả của bạn. Bốn khối văn bản của bạn sẽ xuất hiện như thế này:

Bạn đã tùy chỉnh thành công các thuộc tính CSS của bạn để ngăn chặn hoặc cho phép ngắt dòng theo bốn kiểu khác nhau.

Kết luận

Trong hướng dẫn này, bạn đã sử dụng CSS để ngăn ngắt dòng trên một khối văn bản. Bạn tạo kiểu cho văn bản bên trong hộp và sau đó thêm thuộc tính khoảng white-space để overrides gói văn bản mặc định. Để tìm hiểu thêm về cách xử lý gói văn bản và khoảng trắng, hãy xem xét khám phá toàn bộ thuộc tính CSS white-space .

Tags:

Các tin liên quan

Cách tạo hộp trích dẫn nổi bật trên trang web của bạn bằng CSS (Phần 6)
2020-10-14
Cách thêm phần sơ yếu lý lịch hoặc lịch sử việc làm vào trang web của bạn bằng CSS (Phần 4)
2020-10-14
Cách xây dựng phần Giới thiệu về bản thân trên trang web của bạn bằng CSS (Phần 2)
2020-10-14
Cách xây dựng nhiều thanh bên cố định xếp chồng với CSS thuần túy và Bootstrap 4
2020-10-14
Cách xây dựng bố cục lát gạch bằng CSS (Phần 3)
2020-10-14
Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
Cách tạo kiểu cho phần thân của trang web bằng CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách tạo kiểu cho image bằng CSS
2020-10-13
Cách khai báo giá trị cho nhiều thuộc tính trong quy tắc CSS
2020-10-13