Nếu một từ có kích thước quá dài so với chiều rộng của phần tử chứa nó thì từ đó sẽ không tự động ngắt xuống dòng, mà nó vẫn hiển thị trên một dòng, dẫn đến việc từ đó bị tràn ra ngoài.
Từ đây, ta có thể sử dụng thuộc tính word-wrap để thiết lập việc tự ngắt xuống dòng giữa các ký tự của một từ (trong trường hợp từ đó quá dài so với chiều rộng của phần tử chứa nó)
Cách sử dụng thuộc tính word-wrap
Cú pháp:
word-wrap: normal | break-word | initial | inherit;
Giải thích ý nghĩa các giá trị của thuộc tính word-wrap:
| Giá trị | Mô tả | Xem ví dụ |
|---|---|---|
| normal | Không ngắt xuống dòng nếu một từ có kích thước quá dài so với chiều rộng của phần tử chứa nó | Xem ví dụ |
| break-word | Tự động ngắt xuống dòng nếu một từ có kích thước quá dài so với chiều rộng của phần tử chứa nó | Xem ví dụ |
| initial | Sử dụng giá trị mặc định của nó | |
| inherit | Kế thừa giá trị thuộc tính word-wrap từ phần tử cha của nó |
Cú pháp dùng để cắt chuỗi trên nhiều dòng:
p{
width: 500px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 25px;
-webkit-line-clamp: 3;
height: 75px;
display: -webkit-box;
-webkit-box-orient: vertical;
}
line-height: 25px;: Set line-height cho đoạn văn bản
-webkit-line-clamp:3;: Số dòng text hiển thị
height: 75px;: Set chiều cao cho đoạn văn bản. height = line-height * line-clamp Kết quả