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.

Nguồn tin: Xuanthulab