Trong CSS, thuộc tính white space được sử dụng để xác định cách hiển thị nội dung bên trong một phần tử. Nó được sử dụng để điều khiển khoảng trắng bên trong một phần tử. Trong bài viết này, chúng ta sẽ tìm hiểu về các giá trị của thuộc tính White Space, ưu và nhược điểm của nó, ai nên sử dụng nó và hướng dẫn cách sử dụng.
Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.
CSS White Space là gì ?
White space trong CSS được sử dụng để xác định cách hiển thị khoảng trắng giữa các từ trong một phần tử HTML. Khoảng trắng có thể bao gồm dấu cách, tab, xuống dòng và các ký tự không hiển thị khác. Thuộc tính White Space cho phép bạn kiểm soát cách các khoảng trắng này được hiển thị và xử lý.
Có nhiều giá trị khác nhau của thuộc tính White Space, từ “normal” cho đến “pre-wrap”. Mỗi giá trị có cách hiển thị và xử lý khoảng trắng khác nhau. Chúng ta sẽ tìm hiểu chi tiết về các giá trị này sau.
Thuộc tính CSS White Space có thể được sử dụng bởi các lập trình viên web để kiểm soát cách nội dung được hiển thị trong một phần tử HTML. Nó có thể hữu ích trong nhiều trường hợp khác nhau, bao gồm:
- Điều chỉnh khoảng cách giữa các từ hoặc đoạn văn trong một trang web.
- Chỉ định cách xuống dòng và xử lý các ký tự không hiển thị trong mã HTML.
- Kiểm soát cách các trình duyệt hiển thị nội dung của bạn.
Hướng dẫn CSS White Space
Giá trị “normal”
Giá trị mặc định của thuộc tính white space là “normal”. Khi bạn sử dụng giá trị này, nội dung trong phần tử sẽ được hiển thị theo cách thông thường. Trình duyệt sẽ tự động xử lý các khoảng trắng, bao gồm việc gộp các khoảng trắng liên tiếp thành một khoảng trắng đơn (ví dụ dưới cùng).
Giá trị “nowrap”
Khi bạn sử dụng giá trị “nowrap”, các khoảng trắng liên tiếp sẽ được gộp lại thành một khoảng trắng đơn, tương tự như giá trị “normal”. Tuy nhiên, điểm khác biệt là văn bản sẽ không được xuống dòng tự động. Bạn có thể sử dụng thẻ <br> để chuyển đến dòng tiếp theo.
Giá trị “pre”
Khi bạn sử dụng giá trị “pre”, các khoảng trắng và xuống dòng trong phần tử sẽ được giữ nguyên, tương tự như cách sử dụng thẻ <pre> trong HTML. Nội dung sẽ chỉ xuống dòng khi bạn sử dụng thẻ <br> hoặc thẻ mới.
Giá trị “pre-line”
Giá trị “pre-line” giống như giá trị “normal” và “nowrap” trong việc gộp các khoảng trắng liên tiếp thành một khoảng trắng đơn. Tuy nhiên, khi xuống dòng, văn bản sẽ được chia thành các dòng riêng biệt.
Giá trị “pre-wrap”
Giá trị “pre-wrap” giống như giá trị “pre”, tuy nhiên sẽ cho phép text wrap tự động và xuống dòng khi cần thiết. Các khoảng trắng và xuống dòng trong phần tử sẽ được giữ nguyên.
Giá trị “initial”
Giá trị “initial” sẽ đặt lại thuộc tính white space về giá trị mặc định của nó.
Giá trị “inherit”
Giá trị “inherit” sẽ kế thừa thuộc tính white space từ phần tử cha của nó.
Ví dụ thực tế CSS White Space
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
Write some text..Write some text..Write some text..
</p>
</body>
</html> Ưu và Nhược điểm CSS White Space là gì
Ưu điểm của thuộc tính White Space là rất hữu ích để kiểm soát cách hiển thị và xử lý khoảng trắng trong phần tử HTML. Nó giúp bạn điều chỉnh khoảng cách giữa các từ và đoạn văn, chỉ định cách xuống dòng và xử lý các ký tự không hiển thị trong mã HTML.
Tuy nhiên, có một số nhược điểm của thuộc tính này, bao gồm:
- Sử dụng quá nhiều thuộc tính White Space có thể làm cho mã HTML khó đọc và bảo trì.
- Một số giá trị White Space có thể không được hỗ trợ trên tất cả các trình duyệt.
Nếu bạn đang sử dụng thuộc tính White Space trong mã HTML của mình, hãy nhớ giữ mã của mình sạch sẽ và dễ đọc. Hãy chỉ sử dụng giá trị White Space khi cần thiết và nên kiểm tra tính khả dụng của nó trên tất cả các trình duyệt.
5 câu hỏi về CSS White Space
1. Làm thế nào để sử dụng thuộc tính White Space trong CSS?
Bạn có thể sử dụng thuộc tính White Space bằng cách thêm mã CSS sau vào phần tử HTML của bạn:
white-space: value;Thay thế “value” bằng giá trị White Space mà bạn muốn sử dụng.
2. Giá trị “normal” của White Space là gì?
Giá trị “normal” là giá trị mặc định của thuộc tính White Space. Nội dung sẽ xuống dòng và các khoảng trắng liên tiếp sẽ được gộp thành một khoảng trắng đơn.
3. Tôi có thể sử dụng nhiều giá trị White Space trong cùng một phần tử HTML không?
Có, bạn có thể sử dụng nhiều giá trị White Space trong cùng một phần tử HTML bằng cách sử dụng dấu cách để ngăn cách chúng:
white-space: value1 value2;4. Tôi có thể kế thừa thuộc tính White Space từ phần tử cha của mình không?
Có, bạn có thể sử dụng giá trị “inherit” để kế thừa thuộc tính White Space từ phần tử cha của mình.
5. Các giá trị White Space khác nhau có tác động đến SEO không?
Không, các giá trị khác nhau của White Space không có tác động đến SEO của trang web của bạn.