Trong các thiết kế web thông thường ta sẽ dễ thây nhất một số lỗi văn bản tran ra khỏi vùng thiết kế được chỉ định dẫn tới ảnh hưởng tới toàn bộ bố cục thiết kế của chúng ta. Đối một một số designer lâu năm thì đây là một vấn đề vô cùng bình thương thường, nhưng với mốt newbie(người mới) trong lĩnh vực thiết kế CSS thì nó có thể là một điều gì đó khó khăng. Để giúp các bạn mới đầu học thiết kế web hoặc CSS hiểu rõ hơn về vấn đề này nên tôi viết bài hướng dẫn này có gì thiết xót thì rất mong nhận được ý kiến phản hồi từ các bạn để cùng nhau học tập.
Như bạn thấy với đoạn text trong div thì nó hiển thị hoàn toàn hợp lệ vì không bị tràn ra khỏi chiều dài 10em được định nghĩa.
Tuy nhiên nếu trong văn bản trên xuất hiện một từ có chiều dài qua 10em thì bạn sẽ nhập được một thiết kế bị lỗi vì nó vượt qua chiều dài 10em đã được định nghĩa.
Đây một lỗi do từ quá dài mà tôi đã trình bài trước đây trong bài viết Làm thế nào để một từ dài trong div xuống dòng?, để giải quyết trường hợp này ta có 2 giải pháp môt là ẩn đi các ký từ có chiều dài lớn hơn 10em bằng thuộc tính "overflow-x: hidden", tuy nhiên đây là một giải pháp không trọn vẹn, nên thay vào đó đó người ta sẽ dùng thuộc tính "word-wrap: break-word" để giải quyết trường hợp này. Để hiểu hơn bạn hãy xem hai ví dụ bên dưới.
Phía trên tôi đã nói về chiều rộng(width) nhưng nếu gặp trường hợp chiều cao (height) như ví dụ bên dưới thì phải làm thế nào?
Tương tự như một giải pháp trên chiều rộng (width) ta có thể ẩn các đoạn văn bản bị tràn ra khỏi chiều cao (height) bằng "overflow-y: hidden" được định nghĩa như sau.
Thông thường chiều cao được định nghĩa mặc định là auto tự động co giãn, vì khi một người đọc thông thường thì không ai mong muốn đọc tin theo một chiều dài xòng sọc mà sẽ là đọc từ trên xuống dưới, vì vậy không ai lại chọn giải pháp cố định chiều cao (height) và để chiều dài auto để giải quyết trường hợp này.
Thay vào đó người ta sẽ chọn giải pháp là tạo thanh scroll để giải quyết trường hợp chiều cao (height) bị giới hạn cùng với chiều rộng (widht) bị giới hạn.
Sẵn đây xin giới thiệu với các bạn một phương khác, nó tượng tự như overflow-x: hidden, nhưng ở đây ta sẽ thấy thêm dấu 3 chấm (...) tương trưng cho việc đoạn vẵn bản này vẫn còn tiếp và có thể ta sẽ kết hợp với một button nào đó để khi người dùng click vào nó sẽ hiển thị toàn bộ văn bản ở một vị trí nào đó, như message box chẳng hạn.
Hi vọng qua bài viết này sẽ giúp các hạn hiểu hơn vấn đế tràn văn bản trong thiết kế website. Nếu bạn viết hữu ích cho bạn thì hay like hoặc g+ để ủng hộ blog của mình ^^!
Như bạn thấy với đoạn text trong div thì nó hiển thị hoàn toàn hợp lệ vì không bị tràn ra khỏi chiều dài 10em được định nghĩa.
Đây là một văn bản dài nhưng không bị tràn qua chiều rộng vùng div.
<div style="width: 10em;border:1px solid #ccc">
Đây là một văn bản dài nhưng không bị tràn qua chiều rộng vùng div.
</div>
Đây là một văn bản dài nhưng không bị tràn qua chiều rộng vùng div.
</div>
Tuy nhiên nếu trong văn bản trên xuất hiện một từ có chiều dài qua 10em thì bạn sẽ nhập được một thiết kế bị lỗi vì nó vượt qua chiều dài 10em đã được định nghĩa.
Đây là một văn bản dài bị tràn qua chiều rộng vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
<div style="width: 10em;border:1px solid #ccc">
Đây là một văn bản dài bị tràn qua chiều rộng vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Đây là một văn bản dài bị tràn qua chiều rộng vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Đây một lỗi do từ quá dài mà tôi đã trình bài trước đây trong bài viết Làm thế nào để một từ dài trong div xuống dòng?, để giải quyết trường hợp này ta có 2 giải pháp môt là ẩn đi các ký từ có chiều dài lớn hơn 10em bằng thuộc tính "overflow-x: hidden", tuy nhiên đây là một giải pháp không trọn vẹn, nên thay vào đó đó người ta sẽ dùng thuộc tính "word-wrap: break-word" để giải quyết trường hợp này. Để hiểu hơn bạn hãy xem hai ví dụ bên dưới.
Đây là một văn bản dài nhưng không bị tràn qua chiều rộng vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
Phía trên tôi đã nói về chiều rộng(width) nhưng nếu gặp trường hợp chiều cao (height) như ví dụ bên dưới thì phải làm thế nào?
Đây là một văn bản dài bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
<div style="width: 10em;border:1px solid #ccc;height: 1.2em;">
Đây là một văn bản dài bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Đây là một văn bản dài bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Tương tự như một giải pháp trên chiều rộng (width) ta có thể ẩn các đoạn văn bản bị tràn ra khỏi chiều cao (height) bằng "overflow-y: hidden" được định nghĩa như sau.
<div style="width: 10em;border:1px solid #ccc;height: 1.2em;overflow-y: hidden;">
Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Thông thường chiều cao được định nghĩa mặc định là auto tự động co giãn, vì khi một người đọc thông thường thì không ai mong muốn đọc tin theo một chiều dài xòng sọc mà sẽ là đọc từ trên xuống dưới, vì vậy không ai lại chọn giải pháp cố định chiều cao (height) và để chiều dài auto để giải quyết trường hợp này.
Thay vào đó người ta sẽ chọn giải pháp là tạo thanh scroll để giải quyết trường hợp chiều cao (height) bị giới hạn cùng với chiều rộng (widht) bị giới hạn.
Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
<div style="width: 10em; height: 1.2em; border: 1px solid #ccc; padding: 1em; overflow: scroll;">
Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Sẵn đây xin giới thiệu với các bạn một phương khác, nó tượng tự như overflow-x: hidden, nhưng ở đây ta sẽ thấy thêm dấu 3 chấm (...) tương trưng cho việc đoạn vẵn bản này vẫn còn tiếp và có thể ta sẽ kết hợp với một button nào đó để khi người dùng click vào nó sẽ hiển thị toàn bộ văn bản ở một vị trí nào đó, như message box chẳng hạn.
<div style="width: 10em; height: 4.2em; border: 1px solid #ccc; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;">
Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
<br/>Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
<br/>Đây là một văn bản dài nhưng không bị tràn qua chiều cao vùng div có mã số là AVCDFE_6489846546_DSFDSFSD
</div>
Hi vọng qua bài viết này sẽ giúp các hạn hiểu hơn vấn đế tràn văn bản trong thiết kế website. Nếu bạn viết hữu ích cho bạn thì hay like hoặc g+ để ủng hộ blog của mình ^^!
