Hướng dẫn how do you stop a line break in html? - làm thế nào để bạn dừng ngắt dòng trong html?

Có một số cách để ngăn chặn sự phá vỡ dòng trong nội dung. Sử dụng   là một cách và hoạt động tốt giữa các từ, nhưng sử dụng nó giữa một phần tử trống và một số văn bản không có hiệu ứng được xác định rõ. Điều tương tự sẽ áp dụng cho cách tiếp cận hợp lý và dễ tiếp cận hơn, nơi bạn sử dụng hình ảnh cho một biểu tượng.

Giải pháp thay thế mạnh mẽ nhất là sử dụng đánh dấu nobr, không đạt tiêu chuẩn nhưng được hỗ trợ phổ biến và hoạt động ngay cả khi CSS bị vô hiệu hóa:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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.

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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

• Làm thế nào để bạn ngăn một dòng phá vỡ?
• Bạn có thể ngăn ngừa ngắt dòng và gói văn bản cho các yếu tố cụ thể bằng thuộc tính không gian trắng CSS.
• Làm thế nào để bạn kết thúc một dòng trong HTML?

Phần tử HTML tạo ra một đường ngắt trong văn bản (trở lại vận chuyển).

Thẻ nào là chính xác cho dòng phá vỡ?

TAG chèn một ngắt dòng duy nhất. Thẻ rất hữu ích cho địa chỉ viết hoặc bài thơ.

nano main.css

Giới thiệu

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

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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

nano index.html

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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

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

Thẻ nào là chính xác cho dòng phá vỡ?