Tìm hiểu thuộc tính white-space và cách sửa lỗi chữ trong menu bị bẻ xuống dòng

Chữ trong các menu bị bẻ xuống dòng là một trong những lỗi khá phổ biến. Lỗi này sẽ không xuất hiện nếu bạn xem trên các phiên bản mới nhất của các trình duyệt Chrome, Firefox,… Tuy nhiên ở các phiên bản thấp hơn của các trình duyệt này, lỗi chữ bị bẻ xuống dòng có thể sẽ xảy ra.

Hiện tượng và cách sửa lỗi

Trước và sau khi sửa lỗi

Trước và sau khi sửa lỗi

Việc fix lỗi này là khá đơn giản, bạn chỉ cần thêm vào thuộc tính white-space với giá trị nowrap như hình dưới đây là mọi thứ sẽ ok ngay.

Thêm thuộc tính white-space: nowrap cho các menu item

Thêm thuộc tính white-space: nowrap cho các menu item

Thuộc tính white-space

Thuộc tính white-space dùng để xác định khoảng trắng (dấu cách) bên trong một phần tử sẽ được điều khiển như thế nào (The white-space property specifies how white-space inside an element is handled).

Cú pháp:

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

Giải thích các giá trị:

  • normal: Đây là giá trị mặc định, các dấu cách thừa sẽ bị bỏ qua và chỉ giữ lại một dấu cách duy nhất giữa các từ. Chữ sẽ bị bẻ xuống hàng nếu cần thiết (nếu không đủ diện tích chiều ngang để hiển thị).
  • nowrap: Các dấu cách thừa sẽ bị bỏ qua và chỉ giữ lại một dấu cách duy nhất giữa các từ. Chữ sẽ không bao giờ bị bẻ xuống hàng mới. Chữ sẽ luôn nằm trên một dòng cho tới khi gặp thẻ <br>
  • pre: Dấu cách được giữ nguyên như trong mã nguồn, trình duyệt không can thiệp. Chữ chỉ bị bẻ xuống hàng khi gặp thẻ <br>. Hoạt động giống như thẻ <pre> trong HTML
  • pre-line: Các dấu cách thừa sẽ bị bỏ qua và chỉ giữ lại một dấu cách duy nhất giữa các từ. Chữ sẽ bị bẻ xuống hàng nếu cần thiết, hoặc khi gặp thẻ <br>
  • pre-wrap: Dấu cách được giữ nguyên như trong mã nguồn, trình duyệt không can thiệp. Chữ sẽ bị bẻ xuống hàng nếu cần thiết, hoặc khi gặp thẻ <br>
  • initial: Đưa về giá trị mặc định
  • inherit: Kế thừa giá trị của thuộc tính white-space từ phần tử cha

Bạn có thể thử các giá trị này tại đây.

Lời kết

Hi vọng với mẹo nhỏ này sẽ giúp bạn xử lý những tình huống tương tự. Để tìm hiểu thêm về thuộc tính white-space, bạn có thể đọc trên W3Schools.com hoặc bất kỳ trang, lớp dậy học Web Design trực tuyến nào khác mà bạn biết, MyLớp.edu.vn chẳng hạn! Chúc bạn thành công.

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website