Khoảng trắng trong html là gì?

ví dụ 2. Ví dụ sau đây hiển thị một mảng 2d các Số nguyên được nhập mã dưới dạng cấu trúc với mỗi hàng trong một dòng khác nhau. Nếu bạn thấy đầu ra, nó sẽ xuất hiện trên một dòng với tất cả các khoảng trắng được thu gọn

Thuộc tính CSS white-space kiểm soát cách xử lý văn bản trên phần tử mà nó được áp dụng cho. Giả sử bạn có HTML chính xác như thế này

  A bunch of words you see.

Bạn đã tạo kiểu cho div để có chiều rộng được đặt là 100px. Với kích thước phông chữ hợp lý, đó là quá nhiều văn bản để phù hợp với 100px. Không làm gì cả, giá trị mặc định của white-space là

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

1 và văn bản sẽ ngắt dòng. Xem ví dụ bên dưới hoặc làm theo ở nhà với bản demo

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

Nếu bạn muốn ngăn văn bản xuống dòng, bạn có thể áp dụng

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

2

Lưu ý trong ví dụ về mã HTML ở đầu bài viết này, thực tế có hai ngắt dòng, một ngắt dòng trước và một ngắt dòng sau, cho phép văn bản nằm trên một dòng riêng [trong mã]. Khi văn bản hiển thị trong trình duyệt, các ngắt dòng đó xuất hiện như thể chúng bị loại bỏ. Cũng loại bỏ các khoảng trắng thừa trên dòng trước chữ cái đầu tiên. Nếu chúng tôi muốn buộc trình duyệt hiển thị các ngắt dòng đó và các ký tự khoảng trắng thừa, chúng tôi có thể sử dụng

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

3

Nó được gọi là

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

4 vì hành vi giống như thể bạn đã bọc văn bản trong các thẻ

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

5 [theo mặc định sẽ xử lý khoảng trắng và ngắt dòng theo cách đó]. Khoảng trắng được tôn trọng chính xác như trong HTML và văn bản không ngắt dòng cho đến khi có dấu ngắt dòng trong mã. Điều này đặc biệt hữu ích khi hiển thị mã theo nghĩa đen, mang lại lợi ích về mặt thẩm mỹ từ một số định dạng [và đôi khi là cực kỳ quan trọng, như trong các ngôn ngữ phụ thuộc vào khoảng trắng. ]

Có lẽ bạn thích cách

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

4 tôn vinh khoảng trắng và dấu ngắt, nhưng bạn cần văn bản được ngắt dòng thay vì có khả năng thoát ra khỏi vùng chứa chính của nó. Đó là những gì

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

1 dành cho

Cuối cùng,

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

2 sẽ ngắt các dòng mà chúng ngắt mã, nhưng khoảng trắng thừa vẫn bị xóa

Thật thú vị, ngắt dòng cuối cùng không được tôn trọng. Theo CSS2. 1 thông số kỹ thuật. “Các dòng bị ngắt ở các ký tự dòng mới được giữ nguyên và khi cần thiết để điền vào các hộp dòng. ” vì vậy có lẽ điều đó có ý nghĩa

Đây là một bảng để hiểu các hành vi của tất cả các giá trị khác nhau

Dòng mớiDấu cách và tabGói văn bản

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

1Thu gọnThu gọnGói

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

4Giữ nguyênGiữ lạiKhông bọc

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

5Thu gọnThu gọnKhông bọc

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

6Giữ nguyênGiữ lạiGói

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

7Giữ nguyênThu gọnGói

Trong CSS3, thuộc tính white-space thực sự sẽ đi theo biểu đồ đó và ánh xạ các thuộc tính thành

div {
  /* This is the default, you don't need to
     explicitly declare it unless overriding
     another declaration */
  white-space: normal; 
}

9 và white-space0 tương ứng

Hướng dẫn này chỉ cho bạn cách thêm khoảng trống trong HTML. Bất kỳ khoảng trống nào bạn nhập vào văn bản HTML để hiển thị trong trình duyệt, ngoài một khoảng trắng giữa các từ, đều bị bỏ qua. Do đó, bạn phải mã hóa các khoảng trống mong muốn vào tài liệu của mình. Bạn có thể thêm khoảng trống trong HTML vào bất kỳ dòng văn bản nào. Bạn có thể sử dụng thực thể   HTML để tạo khoảng trống trong cả văn bản đoạn văn và văn bản trong bảng, chẳng hạn. Vì không có ký tự bàn phím khoảng trống trong HTML, bạn phải nhập thực thể   cho mỗi khoảng trắng để thêm

Ý nghĩa của khoảng trắng trong HTML là gì?

Ý nghĩa của khoảng trắng là gì?