Nhưng đây là tin tốt: bạn có thể giải quyết những đoạn văn bản dài như vậy bằng cách gói chúng vào một dòng mới bằng cách sử dụng CSS. Trong bài viết này, FUNiX sẽ chỉ cho bạn cách gói các văn bản dài, không bị đứt đoạn bằng CSS.
Cách hoạt động của CSS Text Wrap
CSS xử lý các từ dài được kéo dài bằng cách sử dụng thuộc tính word-wrap hoặc tràn-bọc có sẵn .
Tuy nhiên, khi không được kiểm soát, các trình duyệt sẽ xử lý các văn bản dài như vậy theo mặc định. Họ sẽ không nói dài dòng cho đến khi họ nhận được hướng dẫn để làm như vậy.
Hai thuộc tính CSS chính được đề cập trước đó hoạt động theo cùng một cách và bạn có thể sử dụng chúng thay thế cho nhau. Tuy nhiên, chúng chấp nhận bốn giá trị hoặc cú pháp:
- break-word : Đây là cú pháp CSS thực tế yêu cầu trình duyệt chuyển một đoạn văn bản dài sang một dòng mới.
- normal : Nó ngắt từng từ tại các điểm phân tách thông thường trong DOM. Nó không có tác dụng đối với các chuỗi dài.
- ban đầu : Đó là cách xử lý chuỗi mặc định của trình duyệt. Giống như cú pháp thông thường , nó không ngắt các từ dài.
- inherit : Nó yêu cầu phần tử con kế thừa tài sản của phần tử cha của nó. Nhưng nó vẫn không hoạt động với các văn bản dài, ngoại trừ việc bạn áp dụng ngắt từ cho phần tử mẹ.
Cách gói các từ dài bằng cách sử dụng CSS Word Wrap
Việc chuyển các từ sang một dòng mới bằng CSS rất dễ dàng và không yêu cầu các chỉnh sửa CSS rườm rà để hoạt động.
Ví dụ: văn bản h2 dài trong vùng chứa văn bản trong hình ảnh mẫu bên dưới vượt qua đường biên giới:
Hãy xem cách chúng ta có thể bọc nó vào dòng tiếp theo bằng cách sử dụng thuộc tính CSS word-wrap :
HTML :
<div class="wrap-it">
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
</div">
CSS :
.wrap-it{
word-wrap: break-word;
}
Sau khi gói văn bản dài h2 trong hình ảnh mẫu, đây là kết quả đầu ra:
Đó là nó! Bây giờ bạn biết cách quấn các từ vào một dòng mới trong DOM của mình bằng cách sử dụng CSS.
Tuy nhiên, như đã nêu trước đó, word-wrap và tràn-wrap hoạt động theo cùng một cách và chấp nhận các thuộc tính tương tự.
Để thay vào đó, bạn chỉ cần thay thế word-wrap bằng nó.
Điều quan trọng là phải kết hợp các từ trên một trang web
Ngoài việc tăng thêm tính thẩm mỹ cho trang web của bạn, gói văn bản sẽ thu gọn DOM. Ngay cả khi bạn kiểm soát những gì đi vào phần nội dung của mình, người dùng có thể đăng liên kết hoặc các từ khác không phù hợp với vùng chứa văn bản hoặc toàn bộ DOM của bạn.
Do đó, việc áp dụng text wrap cho một phần như vậy là cần thiết để giữ nguyên DOM.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/css-text-wrap/
Bình luận (0
)