Hướng dẫn nowrap css

Question

Trang chủ
Tham khảo
CSS
Thuộc tính white-space

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Trình duyệt hỗ trợ
1) Thuộc tính white-space trong CSS
2) Cách sử dụng thuộc tính white-space trong CSS

Định nghĩa và sử dụng

Thuộc tính white-space xác định khoảng trắng có bên trong thành phần được xử lý như thế nào.

Cấu trúc

tag {
    white-space: giá trị;
}

Với giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
white-space	normal	white-space: normal;	Khoảng trắng sẽ thể hiện bình thường, đây là dạng mặc định.
nowrap	white-space: nowrap;	Văn bản sẽ hiển thị trên cùng một hàng, chỉ xuống hàng khi gặp thẻ <br />.
pre	white-space: pre;	Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ hiển thị trên cùng một hàng, chỉ ngắt dòng tại đoạn văn bản sử dụng thẻ <pre>.
pre-line	white-space: pre-line;	Văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng.
pre-wrap	white-space: pre-wrap;	Khoảng trắng sẽ do trình duyệt điều khiển, văn bản sẽ tự động bao lại khi cần thiết, và xuống hàng.
inherit	white-space: inherit;	Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ 
cho <span>thuộc tính white-space</span></p>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-space

CSS viết:

p span {
    white-space: nowrap;
}

Hiển thị trình duyệt khi có CSS:

Đây là đoạn text có chiều dài hai dòng, chúng ta sẽ sử dụng đoạn text này để dùng làm ví dụ cho thuộc tính white-space

Trên ví dụ trên ta đã dùng thuộc tính white-space: nowrap; cho thành phần <span>, do đó đoạn text trong thành phần <span> sẽ hiển thị trên cùng một dòng.

Trình duyệt hỗ trợ

Thuộc tính white-space được hỗ trợ trong đa số các trình duyệt.

Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype

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ử.

- 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ụ