Cách fix lỗi text tràn ra khỏi thẻ div năm 2024
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. Ví dụ: Học lập trình webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb từ cơ bản đến nâng cao Xuống dòng CSS chỉ là một trong số những hiệu ứng xử lý văn bản. Nếu bạn đã biết cách làm text xuống dòng CSS, thì bài viết dưới đây sẽ cung cấp cho bạn thêm những thuộc tính CSS tạo hiệu ứng text khác, được dùng phổ biến hiện nay. CSS có tên đầy đủ là Cascading Style Sheets. Nó là ngôn ngữ lập trình được sử dụng phổ biến trên mọi trang web dùng HTML hiện nay. Những chi tiết màu sắc hay nghệ thuật trên web đều do CSS tạo ra. Tất cả nhờ thuộc tính phong phú của ngôn ngữ này. Vì thế, để sử dụng tốt CSS, bạn cần hiểu các thuộc tính của nó. CSS là cơ chế hay phương tiện giúp bạn thêm phong cách cho các tài liệu web. Text Effects hay hiệu ứng văn bản của CSS cho phép người dùng áp dụng các kiểu hiệu ứng khác nhau cho text được sử dụng trong tài liệu HTML. Dưới đây là một số thuộc tính trong CSS mà bạn có thể dùng để thêm hiệu ứng cho văn bản:
Giờ hãy cùng tìm hiểu chi tiết về từng thuộc tính và ví dụ minh họa cụ thể cho chúng. Xuống dòng CSSCSS cung cấp thuộc tính line-break, hữu ích trong việc quyết định cách ngắt dòng trong một khối văn bản. Sau đây là những giá trị mà thuộc tính này có thể có:
Ví dụ:
Text OverflowThuộc tính text-overflow dùng để xử lý một đoạn text bị tràn ra ngoài phần tử chứa nó bằng cách cắt bớt đoạn tràn hoặc hiển thị dưới dạng dấu chấm lửng "..." để làm dấu hiệu cho người dùng. Hai giá trị thường dùng nhất là:
Hai thuộc tính đi kèm text-overflow là:
Ví dụ 1: Xử lý text tràn ra ngoài.
000000;`
000000;`
Kết quả hiển thị: Code đầy đủ:
Đoạn sau chứa văn bản dài bị tràn ra ngoài box chứa nó. Quantrimang.com là mạng xã hội về khoa học công nghệ Quantrimang.com là mạng xã hội về khoa học công nghệ
Ví dụ 2: Hiển thị nội dung bị tràn khi di chuột qua phần tử:
Di chuột qua hai div bên dưới, để xem toàn bộ đoạn text.
Word WrapThuộc tính word-wrap cho phép đoạn text xuống dòng nếu quá dài, có thể gây hiện tượng đứt gãy một từ. Hai giá trị tiêu biểu nhất là:
Ví dụ: Xử lý đoạn text quá dài
Kết quả hiển thị: Code đầy đủ:
WebsiteQuảnTrịMạngWebsiteQuảnTrịMạng là mạng xã hội về khoa
học công nghệ. WebsiteQuảnTrịMạngWebsiteQuảnTrịMạng là mạng xã hội về khoa
học công nghệ. Word BreakWord-wrap xác định có xuống dòng hay không, còn thuộc tính work-break xác định kiểu xuống dòng. Các giá trị thường thấy là:
Nếu là văn bản bình thường, ta sẽ dùng break-word nhiều hơn, còn break-all thường chỉ dùng cho số (nếu có). |