Previous Lesson

Thuộc tính word-wrap trong CSS3

Thuộc tính word-wrap sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout.

Cấu trúc

tag {
    word-wrap: giá trị;
}

word-wrap có các giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
word-wrap	break-word	word-wrap: break-word;	Những từ quá dài sẽ xuống hàng.
word-wrap	normal	word-wrap: normal;	Trả về dạng mặc định ban đầu cho word-wrap.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>HỌC LÂPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP TRÌNH</p>
</body>
</html>

CSS viết:

p {
    border: 1px solid #cc0000;
    width: 150px;
}

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

HỌC LÂPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP TRÌNH

Thêm thuộc tính word-wrap vào CSS:

p {
    border: 1px solid #cc0000;
    width: 150px;
    word-wrap: break-word;
}

Hiển thị trình duyệt khi có word-wrap:

HỌC LÂPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP TRÌNH

Trình duyệt và hệ điều hành hỗ trợ

Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính word-wrap:

	Trình duyệt PC					Smartphone - Tablets

word-wrap	6	3.6	9.5	10	4	3.2	2.1	7.5

Previous Lesson

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·

Thuộc tính word-wrap trong CSS3