Hướng dẫn how do i stop a line breaking in html? - làm cách nào để ngăn ngắt dòng trong html?

(Bạn có thể, nhưng không cần, sử dụng   thay vì không gian trong trường hợp này.)

Một cách khác là thuộc tính

Sau đó, có cách thức CSS, hoạt động trong các trình duyệt kích hoạt CSS và cần thêm một chút mã:

...

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

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ư

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

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

./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à

...

...

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

...

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

...

nano main.css

nano main.css

nano main.css

nano main.css

nano main.css

nano main.css

nano main.css

nano main.css

nano main.css

nano 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ư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

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

nano index.html

Thêm nội dung sau, sẽ liên kết

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

./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 ____10 của bạn cho phần thứ hai và

nano main.css

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

Mở

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

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

Làm thế nào để bạn dừng phá vỡ dòng?

Làm thế nào để bạn ngăn chặn một dòng phá vỡ trong HTML CSS?

Làm thế nào để bạn tiếp tục một dòng trong HTML?

Làm cách nào để giảm không gian BR trong HTML?

Reply 5 0 Chia sẻ