HTML xóa khoảng trắng

Question

Sự hiện diện của khoảng trắng trong DOM có thể gây ra các vấn đề về bố cục và khiến việc thao tác trên cây nội dung trở nên khó khăn theo những cách không mong muốn, tùy thuộc vào vị trí của nó. Bài viết này khám phá thời điểm khó khăn có thể xảy ra và xem xét những gì có thể được thực hiện để giảm thiểu các vấn đề phát sinh

Nội dung chính Show

Khoảng trắng là gì?
HTML phần lớn bỏ qua khoảng trắng?
Điều gì xảy ra với khoảng trắng?
CSS xử lý khoảng trắng như thế nào?
Khoảng trắng trong bối cảnh định dạng khối
Khoảng trắng giữa các phần tử nội tuyến và khối nội tuyến
Các giải pháp
Truyền tải DOM và khoảng trắng
Chức năng trợ giúp khoảng trắng

Khoảng trắng là gì?

Khoảng trắng là bất kỳ chuỗi văn bản nào chỉ bao gồm khoảng trắng, tab hoặc ngắt dòng (chính xác là chuỗi CRLF, dấu xuống dòng hoặc nguồn cấp dữ liệu dòng). Các ký tự này cho phép bạn định dạng mã của mình theo cách giúp bạn và những người khác có thể dễ dàng đọc mã đó. Trên thực tế, phần lớn mã nguồn của chúng tôi chứa đầy các ký tự khoảng trắng này và chúng tôi chỉ có xu hướng loại bỏ nó trong bước xây dựng sản xuất để giảm kích thước tải xuống mã

HTML phần lớn bỏ qua khoảng trắng?

Trong trường hợp của HTML, khoảng trắng phần lớn bị bỏ qua — khoảng trắng ở giữa các từ được coi là một ký tự đơn và khoảng trắng ở đầu và cuối của các phần tử cũng như các phần tử bên ngoài bị bỏ qua. Lấy ví dụ tối thiểu sau đây

DOCTYPE html>

  <h1>      Hello      World!     h1>

Mã nguồn này chứa một vài nguồn cấp dữ liệu dòng sau

<h1>   Hello
        <span> World!span>   h1>

1 và một loạt các ký tự khoảng trắng trước, sau và bên trong phần tử

<h1>   Hello
        <span> World!span>   h1>

2, nhưng trình duyệt dường như không quan tâm và chỉ hiển thị dòng chữ "Xin chào thế giới. " như thể những nhân vật này hoàn toàn không tồn tại

Điều này là để các ký tự khoảng trắng không ảnh hưởng đến bố cục trang của bạn. Tạo không gian xung quanh và bên trong các phần tử là công việc của CSS

Điều gì xảy ra với khoảng trắng?

Tuy nhiên, chúng không chỉ biến mất

Bất kỳ ký tự khoảng trắng nào nằm ngoài phần tử HTML trong tài liệu gốc đều được thể hiện trong DOM. Điều này là cần thiết trong nội bộ để trình soạn thảo có thể giữ nguyên định dạng của tài liệu. Điều này có nghĩa rằng

Sẽ có một số nút văn bản chỉ chứa khoảng trắng và
Một số nút văn bản sẽ có khoảng trắng ở đầu hoặc cuối

Lấy tài liệu sau đây, ví dụ

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

Cây DOM cho cái này trông giống như vậy

Việc bảo toàn các ký tự khoảng trắng trong DOM rất hữu ích theo nhiều cách, nhưng có một số nơi điều này làm cho một số bố cục nhất định trở nên khó triển khai hơn và gây ra sự cố cho các nhà phát triển muốn lặp lại qua các nút trong DOM. Chúng ta sẽ xem xét những vấn đề này và một số giải pháp sau

CSS xử lý khoảng trắng như thế nào?

Hầu hết các ký tự khoảng trắng đều bị bỏ qua, không phải tất cả chúng đều. Trong ví dụ trước, một trong những khoảng cách giữa "Xin chào" và "Thế giới. " vẫn tồn tại khi trang được hiển thị trong trình duyệt. Có các quy tắc trong công cụ trình duyệt quyết định ký tự khoảng trắng nào hữu ích và ký tự nào không — những quy tắc này được chỉ định ít nhất một phần trong Mô-đun văn bản CSS Cấp 3 và đặc biệt là các phần về thuộc tính CSS

<h1>   Hello
        <span> World!span>   h1>

3 và chi tiết xử lý khoảng trắng, nhưng chúng tôi

Thí dụ

Hãy lấy một ví dụ khác. Để dễ dàng hơn, chúng tôi đã thêm một nhận xét hiển thị tất cả dấu cách với ◦, tất cả các tab với ⇥ và tất cả các ngắt dòng với ⏎

ví dụ này

<h1>   Hello
        <span> World!span>   h1>

được hiển thị trong trình duyệt như vậy

Giải trình

Phần tử

<h1>   Hello
        <span> World!span>   h1>

2 chỉ chứa các phần tử nội tuyến. Trong thực tế nó chứa

Một nút văn bản (bao gồm một số khoảng trắng, từ "Xin chào" và một số tab)
Một phần tử nội tuyến (_______15, chứa khoảng trắng và từ "World. ")
Một nút văn bản khác (chỉ bao gồm các tab và dấu cách)

Do đó, nó thiết lập cái được gọi là bối cảnh định dạng nội tuyến. Đây là một trong những bối cảnh hiển thị bố cục có thể có mà các công cụ trình duyệt hoạt động với

Trong ngữ cảnh này, quá trình xử lý ký tự khoảng trắng có thể được tóm tắt như sau

Đầu tiên, tất cả khoảng trắng và tab ngay trước và sau khi ngắt dòng đều bị bỏ qua, vì vậy, nếu chúng ta lấy ví dụ đánh dấu từ trước
________số 8
và áp dụng quy tắc đầu tiên này, chúng tôi nhận được
```
<h1>◦◦◦Hello⏎
<span>◦World!span>⇥◦◦h1>
```
Tiếp theo, tất cả các ký tự tab được xử lý dưới dạng ký tự khoảng trắng, vì vậy ví dụ trở thành
```
<h1>   Hello
        <span> World!span>   h1>
```
0

Tiếp theo, ngắt dòng được chuyển thành dấu cách

<h1>   Hello
        <span> World!span>   h1>

1

Sau đó, bất kỳ khoảng trắng nào ngay sau một khoảng trắng khác (thậm chí trên hai phần tử nội tuyến riêng biệt) đều bị bỏ qua, vì vậy chúng tôi kết thúc với
```
<h1>   Hello
        <span> World!span>   h1>
```
2
Và cuối cùng, các dãy khoảng trắng ở đầu và cuối của một phần tử bị loại bỏ, vì vậy cuối cùng chúng ta có được điều này
```
<h1>   Hello
        <span> World!span>   h1>
```
3

Đây là lý do tại sao mọi người truy cập trang web sẽ thấy cụm từ "Xin chào thế giới. " được viết rất đẹp ở đầu trang, thay vì "Xin chào" thụt vào một cách kỳ lạ theo sau mà là "Thế giới" thụt vào thậm chí còn kỳ lạ hơn. " ở dòng dưới đó

Ghi chú. Firefox DevTools đã hỗ trợ đánh dấu các nút văn bản kể từ phiên bản 52, giúp dễ dàng xem chính xác các ký tự khoảng trắng của nút nào được chứa trong đó. Các nút khoảng trắng thuần túy được đánh dấu bằng nhãn "khoảng trắng"

Khoảng trắng trong bối cảnh định dạng khối

Ở trên, chúng tôi chỉ xem xét các phần tử có chứa các phần tử nội tuyến và bối cảnh định dạng nội tuyến. Nếu một phần tử chứa ít nhất một phần tử khối, thì thay vào đó, nó sẽ thiết lập cái được gọi là bối cảnh định dạng khối

Trong ngữ cảnh này, khoảng trắng được xử lý rất khác

Thí dụ

Hãy xem một ví dụ để giải thích làm thế nào. Chúng tôi đã đánh dấu các ký tự khoảng trắng như trước

Chúng tôi có 3 nút văn bản chỉ chứa khoảng trắng, một nút trước

<h1>   Hello
        <span> World!span>   h1>

6 đầu tiên, một nút nằm giữa 2

<h1>   Hello
        <span> World!span>   h1>

7 và một nút sau

<h1>   Hello
        <span> World!span>   h1>

6 thứ hai

<h1>   Hello
        <span> World!span>   h1>

7

Điều này ám chỉ như vậy

Giải trình

Chúng tôi có thể tóm tắt cách xử lý khoảng trắng ở đây như sau (có thể có một số khác biệt nhỏ trong hành vi chính xác giữa các trình duyệt, nhưng về cơ bản thì điều này hoạt động)

Bởi vì chúng ta đang ở trong ngữ cảnh định dạng khối, mọi thứ phải là một khối, vì vậy 3 nút văn bản của chúng ta cũng trở thành các khối, giống như 2

<h1>   Hello
        <span> World!span>   h1>

6. Các khối chiếm toàn bộ chiều rộng có sẵn và được xếp chồng lên nhau, điều đó có nghĩa là, bắt đầu từ ví dụ trên

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

0

chúng tôi kết thúc với một bố cục bao gồm danh sách các khối này

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

1

Điều này sau đó được đơn giản hóa hơn nữa bằng cách áp dụng các quy tắc xử lý khoảng trắng trong ngữ cảnh định dạng nội tuyến cho các khối này
```
DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>
```
2
3 khối trống mà chúng tôi hiện có sẽ không chiếm bất kỳ khoảng trống nào trong bố cục cuối cùng, bởi vì chúng không chứa bất kỳ thứ gì, vì vậy chúng tôi sẽ chỉ có 2 khối chiếm không gian trong trang. Những người xem trang web sẽ thấy các từ "Xin chào" và "Thế giới. " trên 2 dòng riêng biệt như bạn mong đợi sẽ có 2
```
<h1>   Hello
        <span> World!span>   h1>
```
6. Công cụ trình duyệt về cơ bản đã bỏ qua tất cả các khoảng trắng đã được thêm vào trong mã nguồn

Khoảng trắng giữa các phần tử nội tuyến và khối nội tuyến

Hãy chuyển sang xem xét một số vấn đề có thể phát sinh do khoảng trắng và những gì có thể được thực hiện về chúng. Trước hết, chúng ta sẽ xem xét điều gì sẽ xảy ra với các khoảng trắng ở giữa các phần tử khối nội tuyến và khối nội tuyến. Trên thực tế, chúng ta đã thấy điều này trong ví dụ đầu tiên của mình, khi chúng ta mô tả cách khoảng trắng được xử lý bên trong ngữ cảnh định dạng nội tuyến

Chúng tôi đã nói rằng có các quy tắc bỏ qua hầu hết các ký tự nhưng vẫn giữ nguyên các ký tự phân tách từ. Khi bạn chỉ xử lý các phần tử cấp khối như

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

1 chỉ chứa các phần tử nội tuyến như

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

2,

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

3,

<h1>   Hello
        <span> World!span>   h1>

5, v.v. , bạn thường không quan tâm đến điều này vì khoảng trắng thừa trong bố cục rất hữu ích để phân tách các từ trong câu

Tuy nhiên, nó trở nên thú vị hơn khi bạn bắt đầu sử dụng các yếu tố

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

5. Các phần tử này hoạt động giống như các phần tử nội tuyến ở bên ngoài và các khối ở bên trong và thường được sử dụng để hiển thị các phần giao diện người dùng phức tạp hơn là chỉ văn bản, cạnh nhau trên cùng một dòng, chẳng hạn như các mục menu điều hướng

Bởi vì chúng là các khối, nhiều người mong đợi rằng chúng sẽ hoạt động như vậy, nhưng thực sự chúng không. Nếu có khoảng trắng định dạng giữa các phần tử nội tuyến liền kề, điều này sẽ dẫn đến khoảng trắng trong bố cục, giống như khoảng cách giữa các từ trong văn bản

Thí dụ

Hãy xem xét ví dụ này (một lần nữa, chúng tôi đã bao gồm một nhận xét HTML hiển thị các ký tự khoảng trắng trong HTML)

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

3

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

4

Điều này ám chỉ như sau

Bạn có thể không muốn có các khoảng trống giữa các khối — tùy thuộc vào trường hợp sử dụng (đây là danh sách các hình đại diện hay các nút điều hướng ngang?), bạn có thể muốn các mặt của phần tử phẳng với nhau và để có thể kiểm soát

Trình kiểm tra HTML DevTools của Firefox sẽ đánh dấu các nút văn bản và cũng hiển thị cho bạn chính xác khu vực mà các thành phần đang chiếm giữ — hữu ích nếu bạn đang tự hỏi điều gì gây ra sự cố và có thể nghĩ rằng bạn đã có thêm một số lợi nhuận trong đó hoặc điều gì đó

Các giải pháp

Có một số cách để giải quyết vấn đề này

Sử dụng Flexbox để tạo danh sách các mục theo chiều ngang thay vì thử giải pháp

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

5. Điều này xử lý mọi thứ cho bạn và chắc chắn là giải pháp ưu tiên

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

5

Nếu bạn cần dựa vào

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

5, bạn có thể đặt

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

8 của danh sách thành 0. Điều này chỉ hoạt động nếu các khối của bạn không có kích thước bằng ems (dựa trên

<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!span>⇥◦◦h1>

8, vì vậy kích thước khối cũng sẽ là 0). rems sẽ là một lựa chọn tốt ở đây

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

6

Hoặc bạn có thể đặt lề âm trên các mục danh sách

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

7

Bạn cũng có thể giải quyết vấn đề này bằng cách đặt tất cả các mục trong danh sách của mình trên cùng một dòng trong nguồn, điều này khiến các nút khoảng trắng không được tạo ngay từ đầu

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

8

Truyền tải DOM và khoảng trắng

Khi cố gắng thực hiện thao tác DOM trong JavaScript, bạn cũng có thể gặp sự cố do các nút khoảng trắng. Ví dụ: nếu bạn có một tham chiếu đến một nút cha và muốn tác động đến phần tử con đầu tiên của nó bằng cách sử dụng

<h1>◦◦◦Hello⏎
<span>◦World!span>⇥◦◦h1>

0, nếu có một nút khoảng trắng giả mạo ngay sau thẻ cha mở, bạn sẽ không nhận được kết quả như mong đợi. Nút văn bản sẽ được chọn thay vì phần tử bạn muốn tác động

Một ví dụ khác, nếu bạn có một tập hợp con nhất định các phần tử mà bạn muốn thực hiện điều gì đó dựa trên việc chúng có trống (không có nút con) hay không, bạn có thể kiểm tra xem mỗi phần tử có trống hay không bằng cách sử dụng thứ gì đó như

<h1>◦◦◦Hello⏎
<span>◦World!span>⇥◦◦h1>

1, nhưng một lần nữa,

Chức năng trợ giúp khoảng trắng

Mã JavaScript bên dưới xác định một số chức năng giúp xử lý khoảng trắng trong DOM dễ dàng hơn

DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>My Documenttitle>
head>
<body>
  <h1>Headerh1>
  <p>
    Paragraph
  p>
body>
html>

9

Thí dụ

Đoạn mã sau minh họa việc sử dụng các chức năng trên. Nó lặp lại các phần tử con của một phần tử (có tất cả các phần tử con) để tìm phần tử có văn bản là

<h1>◦◦◦Hello⏎
<span>◦World!span>⇥◦◦h1>

2, sau đó thay đổi thuộc tính lớp và nội dung của đoạn đó

programming html

HTML xóa khoảng trắng

Khoảng trắng là gì?

HTML phần lớn bỏ qua khoảng trắng?

Điều gì xảy ra với khoảng trắng?

CSS xử lý khoảng trắng như thế nào?

Thí dụ

Giải trình

Khoảng trắng trong bối cảnh định dạng khối

Thí dụ

Giải trình

Khoảng trắng giữa các phần tử nội tuyến và khối nội tuyến

Thí dụ

Các giải pháp

Truyền tải DOM và khoảng trắng

Chức năng trợ giúp khoảng trắng

Thí dụ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội