Thuộc tính white-space trong CSS

1) Thuộc tính white-space trong CSS

- Thuộc tính white-space xác định cách thức xử lý các dấu khoảng trắng & xuống dòng trong phần tử.

Ví dụ:

- Tôi có một đoạn mã như sau:

<p>HTML cực kỳ dễ học.       Đồng thời, 
      chúng tôi xin giới thiệu 

      đến các bạn loạt Tài liệu hướng dẫn    học 
      HTML đã được     biên soạn kỹ lưỡng theo trình tự từ 
      cơ bản đến nâng cao kèm 
      theo nhiều 
      ví dụ minh họa    đơn giản dễ hiểu. Hứa hẹn 
      sẽ giúp bạn đọc dễ dàng tiếp thu ngôn 
      ngữ HTML trong thời gian ngắn 


    nhất với khối lượng kiến thức đầy đủ nhất.</p>

- Khi đoạn mã đó được thực thi và hiển thị lên màn hình trình duyệt thì mặc định các dấu khoảng trắng liên tiếp sẽ bị gộp lại thành một và các dấu xuống dòng sẽ bị bỏ qua.

HTML cực kỳ dễ học. Đồng thời, chúng tôi xin giới thiệu đến các bạn loạt Tài liệu hướng dẫn học HTML đã được biên soạn kỹ lưỡng theo trình tự từ cơ bản đến nâng cao kèm theo nhiều ví dụ minh họa đơn giản dễ hiểu. Hứa hẹn sẽ giúp bạn đọc dễ dàng tiếp thu ngôn ngữ HTML trong thời gian ngắn nhất với khối lượng kiến thức đầy đủ nhất.

- Tuy nhiên, với việc sử dụng thuộc tính white-space, ta có thể giữ nguyên các dấu khoảng trắng & xuống dòng.

HTML cực kỳ dễ học.       Đồng thời, 
    chúng tôi xin giới thiệu 

    đến các bạn loạt Tài liệu hướng dẫn    học 
    HTML đã được     biên soạn kỹ lưỡng theo trình tự từ 
    cơ bản đến nâng cao kèm 
    theo nhiều 
    ví dụ minh họa    đơn giản dễ hiểu. Hứa hẹn 
    sẽ giúp bạn đọc dễ dàng tiếp thu ngôn 
    ngữ HTML trong thời gian ngắn 


  nhất với khối lượng kiến thức đầy đủ nhất.

- Hoặc giữ nguyên các dấu xuống dòng.

HTML cực kỳ dễ học.       Đồng thời, 
    chúng tôi xin giới thiệu 

    đến các bạn loạt Tài liệu hướng dẫn    học 
    HTML đã được     biên soạn kỹ lưỡng theo trình tự từ 
    cơ bản đến nâng cao kèm 
    theo nhiều 
    ví dụ minh họa    đơn giản dễ hiểu. Hứa hẹn 
    sẽ giúp bạn đọc dễ dàng tiếp thu ngôn 
    ngữ HTML trong thời gian ngắn 


  nhất với khối lượng kiến thức đầy đủ nhất.

2) Cách sử dụng thuộc tính white-space trong CSS

- Để sử dụng thuộc tính white-space, ta dùng cú pháp như sau:

white-space: normal|nowrap|pre|pre-wrap|pre-line|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính white-space có thể được xác định bởi một trong bảy loại:

normal	- Các dấu khoảng trắng liên tiếp sẽ bị gộp lại thành một. - Các dấu xuống dòng sẽ bị bỏ qua. - Văn bản sẽ được xuống dòng khi cần thiết.	Xem ví dụ
nowrap	- Các dấu khoảng trắng liên tiếp sẽ bị gộp lại thành một. - Các dấu xuống dòng sẽ bị bỏ qua. - Văn bản không bao giờ xuống dòng, nó chỉ xuống dòng khi gặp <br>	Xem ví dụ
pre	- Giữ nguyên các dấu khoảng trắng & xuống dòng. - Văn bản chỉ được xuống dòng khi gặp dấu xuống dòng hoặc <br>	Xem ví dụ
pre-wrap	- Giữ nguyên các dấu khoảng trắng & xuống dòng. - Văn bản sẽ được xuống dòng khi cần thiết.	Xem ví dụ
pre-line	- Các dấu khoảng trắng liên tiếp sẽ bị gộp lại thành một. - Các dấu xuống dòng sẽ được giữ nguyên. - Văn bản sẽ được xuống dòng khi cần thiết.	Xem ví dụ
initial	- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính white-space có giá trị là normal)	Xem ví dụ
inherit	- Kế thừa giá trị thuộc tính white-space từ phần tử cha của nó	Xem ví dụ