Khoảng cách HTML giữa các từ trên cùng một dòng w3schools

Trong HTML, bạn không thể tạo thêm khoảng trắng sau ký tự dấu cách () bằng phím cách. Nếu bạn muốn có 10 khoảng trống trong mã HTML của mình và bạn cố gắng thêm chúng bằng phím cách, bạn sẽ chỉ thấy một khoảng trống trong trình duyệt

Ngoài ra, một hoặc nhiều từ được cho là cùng nhau có thể chuyển thành một dòng mới

Vì vậy, trong bài viết này, tôi sẽ chỉ cho bạn cách tạo bất kỳ số lượng khoảng trống nào bạn muốn trong mã của mình và cách thêm khoảng trắng không ngắt với thực thể ký tự  

Đầu tiên, Thực thể nhân vật là gì?

Các thực thể ký tự được dành riêng để hiển thị các ký tự khác nhau trong trình duyệt

Chẳng hạn, ký hiệu nhỏ hơn (_______16_______) và ký hiệu lớn hơn (>) được dành riêng cho các thẻ trong HTML. Nếu bạn muốn sử dụng chúng trong mã của mình, HTML có thể nhầm chúng với thẻ mở và thẻ đóng

Nếu bạn muốn sử dụng chúng dưới dạng "lớn hơn" và "nhỏ hơn", bạn cần sử dụng các thực thể ký tự tương ứng của chúng (

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     max-width: 800px;
     margin: 0 auto;
     font-size: 2rem;
}

span {
     background-color: #2ecc71;
}
0 và
body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     max-width: 800px;
     margin: 0 auto;
     font-size: 2rem;
}

span {
     background-color: #2ecc71;
}
1). Sau đó, bạn có thể hiển thị chúng một cách an toàn trong trình duyệt

Cách thêm khoảng trắng không phá vỡ trong HTML với  

Vì trình duyệt sẽ chỉ hiển thị một khoảng trống ngay cả khi bạn đặt hàng triệu mã vào mã của mình, nên HTML có thực thể ký tự  . Nó cho phép hiển thị nhiều khoảng trống

Nếu không có thực thể ký tự  , mã của bạn sẽ trông như thế này

Lemurs are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. The numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So, protect lemurs!

Tôi đã thêm một số CSS để làm cho HTML rõ ràng hơn và để dễ dàng xem những gì tôi đang cố gắng trình bày

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     max-width: 800px;
     margin: 0 auto;
     font-size: 2rem;
}

span {
     background-color: #2ecc71;
}

Khoảng cách HTML giữa các từ trên cùng một dòng w3schools

Trong mã HTML bên dưới, tôi đã chèn một số thực thể ký tự   để tạo nhiều khoảng trống

Lemurs           are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. The numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So,         protect lemurs!

Khoảng cách HTML giữa các từ trên cùng một dòng w3schools

Bạn có thể thấy có 5 khoảng trống giữa hai từ đầu tiên và 4 khoảng trống giữa các từ trước và áp chót. Đó là bởi vì tôi đã chèn 5 và 4 ký tự   tương ứng

Nếu không có thực thể ký tự  , điều đó sẽ không thể thực hiện được

Điều gì sẽ xảy ra nếu bạn muốn có nhiều khoảng trắng trong mã của mình?

Chẳng hạn, nếu bạn muốn có 10 khoảng trống trong mã của mình thì sao?

Thay vào đó, HTML cung cấp thực thể ký tự

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     max-width: 800px;
     margin: 0 auto;
     font-size: 2rem;
}

span {
     background-color: #2ecc71;
}
9 cho 2 khoảng trắng không ngắt và

Lemurs           are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. The numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So,         protect lemurs!

0 cho 4 khoảng trắng không ngắt

Lemurs     are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. The numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So,     protect lemurs!

Trong đoạn mã trên, tôi đã chèn 5 khoảng trắng giữa hai từ đầu tiên bằng cách sử dụng

Lemurs           are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. The numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So,         protect lemurs!

0 một lần (4 dấu cách) và   một lần (1 dấu cách). Sau đó, tôi đã sử dụng 2 thực thể

Lemurs           are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. The numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So,         protect lemurs!

3 giữa các từ trước áp chót và áp chót. Vì vậy, số lượng khoảng trống vẫn giữ nguyên như trong ví dụ đầu tiên

Khoảng cách HTML giữa các từ trên cùng một dòng w3schools

Tại sao bạn cần một khoảng trống không phá vỡ trong mã của mình?

Đôi khi, HTML có thể chia các từ lẽ ra phải ở cùng nhau thành một dòng khác – ví dụ: tên viết tắt, đơn vị, ngày tháng, số tiền, v.v.

Thực thể ký tự   ngăn điều này xảy ra. Khi bạn chèn ký tự   giữa các từ như vậy, nó sẽ hiển thị khoảng trắng và sẽ không bao giờ để bất kỳ từ nào ngắt dòng thành một dòng mới

Trong đoạn mã HTML dưới đây, tôi có một số thông tin về vượn cáo – loài linh trưởng xinh đẹp được tìm thấy ở Madagascar

 

Lemurs are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. Th numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So, protect lemurs!

Tôi có một số CSS để làm cho nó rõ ràng hơn và hiển thị những gì tôi đang cố gắng hiển thị

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    max-width: 800px;
    margin: 0 auto;
    font-size: 2rem;
}

span {
    background-color: #2ecc71;
}

Kết quả trông như thế này

Khoảng cách HTML giữa các từ trên cùng một dòng w3schools

Bạn có thể thấy rằng 2 nghìn tỷ đô la bị phá vỡ, điều này trông không đẹp mắt vì nó có thể khiến người đọc bối rối

Thực thể ký tự   buộc hai từ lại với nhau

Lemurs are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. Th numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So, protect lemurs!

Khoảng cách HTML giữa các từ trên cùng một dòng w3schools

Làm thế nào là mát mẻ đó

Phần kết luận

Bạn đã thấy rằng với các thực thể ký tự  ,

body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
     max-width: 800px;
     margin: 0 auto;
     font-size: 2rem;
}

span {
     background-color: #2ecc71;
}
9 và

Lemurs           are primates found exclusively in the isolated island of Madagascar. Lemurs are primates just like apes and monkeys, but they evolved independently and are unique. The numbers of lemurs are dwindling due to poaching and other destructive human activities. Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one. So,         protect lemurs!

0, bạn có thể hiển thị các khoảng trống trong trình duyệt. Điều này là không thể chỉ bằng cách sử dụng phím cách

Bạn cũng có thể sử dụng thực thể ký tự   ở những vị trí cụ thể để ngăn các từ lẽ ra phải ở cùng nhau xâm nhập vào dòng tiếp theo

Cảm ơn bạn đã đọc và tiếp tục mã hóa

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Khoảng cách HTML giữa các từ trên cùng một dòng w3schools
Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng


Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu