Ngôn ngữ CSS - CSS Word Wrap

Thuộc tính Word-Wrap

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ú pháp:

tagName{word-wrap:value}

Bảng danh sách giá trị của thuộc tính word-wrap:

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

Ví dụ: Sử dụng thuộc tính word-wrap:normal;

<html>
<head></head>
<style>
p {
    border: 1px solid #cc0000;
    width: 150px;
}
</style>

<body>
<p>Hiệp SIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIĨ IT</p>
</body>
</html>

Xem ví dụ

Ví dụ : Sử dụng thuộc tính word-wrap:break-word;

<html>
<head></head>
<style>
p {
    border: 1px solid #cc0000;
    width: 150px;
    word-wrap: break-word;
}
</style>

<body>
<p>Hiệp SIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIĨ IT</p>
</body>
</html>

Xem ví dụ