Sử dụng thuộc tính word-wrap với giá trị word-break để ngắt từ dài sao cho vừa vặn với phần tử chứa nó
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.
ĐĂNG KÝ KÊNH, XEM CÁC VIDEO TRÊN XUANTHULAB
Đăng ký nhận bài viết mới