Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Thuộc tính word-wrap CSS3

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ị normalbreak-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.

Vui lòng đăng ký ủng hộ kênh