Hướng dẫn how do i keep line breaks in css? - làm cách nào để giữ ngắt dòng trong css?

Giới thiệu

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

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 với các lần phá vỡ dòng và sau đó ba lần mà không bị phá vỡ dòng:

Medusafish Banded Killifish Convict Blenny Saury Threadsail Beluga Sturgeon. Ấn Độ Mul Mora Cisco Masu Salmon, Roosterfish Requiem Shark Longnose Lancetfish Bluefish Red Snapper Sacramento Splittail khổng lồ Danio.

Medusafish Banded Killifish Convict Blenny Saury Threadsail Beluga Sturgeon. Ấn Độ Mul Mora Cisco Masu Salmon, Roosterfish Requiem Shark Longnose Lancetfish Bluefish Red Snapper Sacramento Splittail khổng lồ Danio.

Medusafish Banded Killifish Convict Blenny Saury Threadsail Beluga Sturgeon. Ấn Độ Mul Mora Cisco Masu Salmon, Roosterfish Requiem Shark Longnose Lancetfish Bluefish Red Snapper Sacramento Splittail khổng lồ Danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper  Sacramento & nbsp; Splittail & nbsp; Giant & nbsp; 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.

Điều kiện tiên quyết

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

• Trình chỉnh sửa mã mà bạn chọn, chẳng hạn như nano hoặc mã Visual Studio
• 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 HTML. Bạn có thể xem loạt hướng dẫn của chúng tôi cách xây dựng một trang web với HTML để giới thiệu.

Bước 1 - Ngăn chặn và buộc phá vỡ dòng trong CSS

Trong bước này, bạn sẽ tạo một bảng kiểu với ba lớp khác nhau. Mỗi người sẽ xử lý dòng bị hỏng khác nhau: đầu tiên sẽ phá vỡ văn bản theo cách mặc định trong khi thứ hai và thứ ba sẽ buộc văn bản không tạo ra dòng mới và ngắt.

Đầu tiên, hãy tạo và mở một tệp mới có tên main.css bằng nano hoặc trình soạn thảo ưa thích của bạ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 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 học đầ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 ____10,

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

1,

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

2,

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

3 và

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

4. Lớp này sẽ tạo ra 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 có nghĩa là nó sẽ phá vỡ các dòng theo cách mặc định.

Lớp thứ hai của bạn là

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

5. Nó xác định 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ý không gian trắng bên trong một phần tử nhất định. Ở đây, bạn đã đặt white-space thành

nano index.html

0, điều này sẽ ngăn chặn tất cả các lần phá vỡ dòng.

Lớp thứ ba của bạn là

nano index.html

1. Nó thêm white-space và hai thuộc tính bổ sung:

nano index.html

3 và

nano index.html

4. Thuộc tính

nano index.html

3 xử lý

nano index.html

6, xảy ra khi các nội dung bên trong một phần tử mở rộng ra ngoài các cạnh của phần tử đó. Thuộc tính

nano index.html

3 có thể làm cho nội dung đó có thể cuộn, hiển thị hoặc ẩn. Bạn đang cài đặt

nano index.html

3 thành

nano index.html

9 và sau đó sử dụng thuộc tính

nano index.html

4 để thêm tùy chỉnh hơn nữa.

nano index.html

4 có thể giúp bạn báo hiệu cho người dùng rằng văn bản bổ sung vẫn bị ẩn. Bạn đã đặt cái này thành

DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSStitle>
<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 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>
body>
html>

2, vì vậy bây giờ dòng của bạn sẽ không phá vỡ cũng không mở rộng ra ngoài hộp. CSS sẽ ẩn tràn và báo hiệu nội dung ẩn với

DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSStitle>
<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 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>
body>
html>

3.

Lưu và đóng tệp của bạn.

Bây giờ bạn có một bảng kiểu, bạn đã sẵn sàng tạo một tệp HTML ngắn với một số văn bản mẫu. Sau đó, bạn sẽ tải trang web trong một trình duyệt và kiểm tra cách CSS có thể ngăn chặn các lỗi đường.

Bước 2 - Tạo tệp 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 vào một số văn bản mẫu.

Tạo và mở một tệp có tên

DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSStitle>
<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 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>
body>
html>

4 trong trình soạn thảo ưa thích của bạn. Đảm bảo đặt nó trong cùng một thư mục với main.css:

nano index.html

Thêm nội dung sau, sẽ liên kết main.css làm

DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSStitle>
<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 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>
body>
html>

7 của bạn và sau đó áp dụng các lớp của bạn vào 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 CSStitle>
<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 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>
body>
html>

Bạn đã chỉ định kiểu gói tiêu chuẩn của mình cho khối văn bản đầu tiên, kiểu

nano index.html

0 của bạn cho phần thứ hai và

nano index.html

0 là

nano index.html

9 với

DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSStitle>
<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 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>
body>
html>

2 đến thứ ba. Bạn đã gán white-space2 cho mẫu thứ tư, nhưng bạn đang ghi đè lên gói mặc định bằng cách chèn các không gian không phá vỡ (white-space3) trực tiếp vào HTML. Nếu bạn cần ngăn chặn việc phá vỡ dòng như một tình huống một lần, thì các không gian không phá vỡ có thể cung cấp một giải pháp nhanh chóng.

Mở

DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with CSStitle>
<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 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>
body>
html>

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

Medusafish Banded Killifish Convict Blenny Saury Threadsail Beluga Sturgeon. Ấn Độ Mul Mora Cisco Masu Salmon, Roosterfish Requiem Shark Longnose Lancetfish Bluefish Red Snapper Sacramento Splittail khổng lồ Danio.

Medusafish Banded Killifish Convict Blenny Saury Threadsail Beluga Sturgeon. Ấn Độ Mul Mora Cisco Masu Salmon, Roosterfish Requiem Shark Longnose Lancetfish Bluefish Red Snapper Sacramento Splittail khổng lồ Danio.

Medusafish Banded Killifish Convict Blenny Saury Threadsail Beluga Sturgeon. Ấn Độ Mul Mora Cisco Masu Salmon, Roosterfish Requiem Shark Longnose Lancetfish Bluefish Red Snapper Sacramento Splittail khổng lồ Danio.

Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper  Sacramento & nbsp; Splittail & nbsp; Giant & nbsp; Danio.

Bạn đã tùy chỉnh thành công các thuộc tính CSS của mình để ngăn chặn hoặc cho phép phá vỡ dòng trong bốn thời trang khác nhau.

Sự kết luận

Trong hướng dẫn này, bạn đã sử dụng CSS để ngăn chặn việc phá vỡ 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 một hộp và sau đó thêm thuộc tính white-space để ghi đè bao bọc văn bản mặc định. Để tìm hiểu thêm về việc xử lý gói văn bản và không gian trắng, hãy xem xét khám phá toàn bộ thuộc tính white-space CSS.

Làm thế nào để bạn mã hóa một dòng phá vỡ trong CSS?

Làm thế nào để bạn giữ một dòng trong CSS?

Làm cách nào để làm văn bản ở lại trên một dòng trong CSS?

Làm thế nào để bạn giữ một dòng phá vỡ trong HTML?