Chủ Nhật, 20 tháng 11, 2011

Tự động xuống dòng khi chuỗi quá dài trong html

Thường thường khi ta đặt 1 chuỗi quá dài trong 1 thẻ html có kích thước cố định nào đó, nếu chuỗi có ngắt khoảng trắng từng từ thì trình duyệt sẽ tự động xuống hàng khi độ dài của chuỗi vượt quá kích thước của thẻ html
Trong trường hợp chuỗi kí tự viết liền nhau không có ngắt từ thì chuỗi sẽ bị vượt ra ngoài thẻ html.
Những người mới viết web người ta thường ít chú ý đến điều này vì khi test chuỗi nhập vào hợp lệ. Nếu người dùng nhập 1 đoạn liên tục nhau và không có khoảng trắng thì khi hiển thị lên sẽ bị vượt ra ngoài và layout sẽ bị bể.

Trường hợp nếu bạn muốn chuỗi vẫn nằm gọn trong thẻ html thì cần thêm thuộc tính style='word-wrap:break-word; ' , lúc này chuỗi sẽ tự động xuống dòng khi kích thước vượt quá kích thước của thẻ html.
Chú ý : mặc định nếu chuỗi bao gồm các từ ngắn có ngắt khoảng trắng thì chuỗi sẽ tự động xuống dòng, chỉ với trường hợp chuỗi nhập vào là 1 chuỗi liền nhau không có khoảng trắng  ngắt từ (thì sẽ bị hiểu là 1 từ) ta mới phải dùng cách này. Tuy nhiên cách tốt nhất khi design ta lên thêm thuộc tính đó vào vì không thể biết trước được người dùng sẽ nhập cái gì.

1 nhận xét :