Thuộc tính word-wrap trong CSS

141 lượt xem
Share

Tác dụng chính của thuộc tính word-wrap là tự động xuống dòng (bẻ dòng) đối với những đoạn văn bản không chứa dấu cách và có độ dài vượt quá đối tượng chứa nó. Đây là lỗi mà chúng ta thường gặp nhất trong trường hợp các đoạn văn bản là những liên kết (url) Website mà có các tham số (Query string) quá dài. Hãy cùng eLib.VN tham khảo bài viết dưới đây để tìm hiểu thêm về thuộc tính này nhé!

Mục lục nội dung

Thuộc tính word-wrap trong CSS

1. Định nghĩa và sử dụng

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ấu trúc

tag {
    word-wrap: giá trị;
}

word-wrap có các giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
word-wrap 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.

2. Ví dụ

HTML viết:

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

Trên đây là bài viết của eLib.VN về thuộc tính word-wrap trong CSS. Qua bài viết này eLib đã hướng dẫn bạn đọc cách thiết lập word-wrap trong CSS. Hi vọng bạn hiểu và vận chúng linh hoạt trong lập trình web.

141 lượt xem
Share
Ngày:10/11/2020 Chia sẻ bởi:
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM