Thuộc tính word-wrap
Thuộc tính word-wrap cho phép các dòng chữ dài có thể được ngắt và xếp xuống dòng tiếp theo. Nó nhận hai giá trị normal và break-word
Cú pháp:
word-wrap: normal | break-word;
Ví dụ sau là word-wrap: normal;
<style>
.normal-wr {
width: 200px;
height: 100px;
border: 1px solid #000000;
word-wrap: normal;
}
</style>
<p class="normal-wr">Đoạn văn có một từ dài:
thisisaverylongkeywordthatnotfoundindictionary</p>
Đoạn văn có một từ dài: thisisaverylongkeywordthatnotfoundindictionary
Giờ chuyển ví dụ trên với thuộc tính word-wrap: break-word;
<style>
.normal-wr {
width: 200px;
height: 100px;
border: 1px solid #000000;
word-wrap: normal;
}
</style>
<p class="normal-wr">Đoạn văn có một từ dài:
thisisaverylongkeywordthatnotfoundindictionary</p>
Đoạn văn có một từ dài: thisisaverylongkeywordthatnotfoundindictionary
Khi sử dụng word-wrap: break-word, trình duyệt sẽ ngắt từ dài quá sao cho vừa phần tử chứa.
