Hướng dẫn ellipsis css
Show
Đã đăng vào thg 8 8, 2019 7:02 SA 3 phút đọc Xin chào các bạn ! Tiếp tục với loạt bài thủ thuật hay xoay quanh CSS, hôm nay mình sẽ chia sẻ bài viết với chủ đề "Làm thế nào để xử lý được text-overflow". Đây là vấn đề được các bạn QA rất hay sử dụng để test giao diện. Ví dụ họ thường có một format kiểu 1001 chữ A dính liền nhau, nhập một đoạn văn bản cực dài cho tiêu đề hoặc bất cứ phần tử nào đó có thể hiển thị text. Và đương nhiên trong quá trình code Front-End (FE) nếu bạn không cover được các trường hợp thực tế có thể xảy ra đó chắc chắn QA sẽ log bug và tặng cho bạn 1 ticket nho nhỏ Dưới đây mình sẽ liệt kê ra một vài rule CSS có thể áp dụng để giải quyết vấn đề trên 1. Sử dụng bộ ba nguyên tử white-space, overflow, text-overflowBộ 3 này support hầu như tất cả trình duyệt nên ta có thể hoàn toàn yên tâm sử dụng ** Với Block-element Đơn giản với các phần tử block bạn chỉ cần thêm các rule sau
Trong đó với:
Và đương nhiên với block-element bạn chỉ có thể quan sát được sự thay đổi khi nội dung container chứa nó không đủ (ví dụ như co cửa sổ trình duyệt xuống tối đa hoặc set width cho phần tử) ** Với Inline-block-element Trong nhiều trường hợp bạn muốn cắt chuỗi nhưng chỉ muốn phần tử hiển thị ở dạng inline-block (ví dụ thẻ
2. Kết hợp -webkit-line-clamp với overflowVới
Đây là một thuộc tính mới rất hay nhưng rất tiếc chỉ support các trình duyệt nhân webkit, bạn có thể xem xét yêu cầu của người dùng để sử dụng cho hợp lý 3. Sử dụng word-breakNgoài 2 cách ẩn nội dung tràn trên thì ta còn có thể sử dụng
Kết luậnTrên đây là một vài cách xử lý text-overflow với css thuần tuy rất nhỏ nhưng sẽ giúp bạn cover được rất nhiều khi bị QA test văn bản. Nếu bạn còn cách nào hay hơn đừng ngần ngại chia sẻ cho cộng đồng FE nhé. Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Xin cảm ơn và hẹn gặp lại ở các bài viết sau ! All rights reserved I'm not a JS pro, but I figured out a couple ways you could do this. Nội dung chính
The HTML:
Then with jQuery you truncate it down to a specific character count but leave the last word like this:
The result looks like this:
Or, you can simply truncate it down to a specific character count like this:
The result looks like this:
Hope that helps a bit. Here is the jsFiddle. Nội dung bài viết Video học lập trình mỗi ngàyText-overflow trong css. Có lúc nào bạn như tôi đi tìm giải pháp cho giới hạn số dòng text với css. Thật ra không cần sử dụng Text-overflow, tôi cũng như các bạn, việc hiển thị (...) trong css, nó tương đối dễ, nhưng việc sử dụng ít nên không bao giờ nhớ được. Sáng nay làm lại giao diện cho một web app thì cần phải sử dụng tính năng css giới hạn text này. Nhưng nó không phải là giới hạn một dòng text với css. Mà là nhiều dòng. Các bạn chú ý đấy dấu ba chấm css (...) nó khác với "Three dots in ES6" nên đừng lầm tưởng đến mức cơ bản đấy. Sau khi đi dạo quang google tìm giải pháp nào cho Multiple Line Ellipsis. Sử dụng text-overflow: ellipsis; Và cuối cùng cũng đã tìm thấy cho dấu ba chấm trong css với nhiều dòng . Sử dụng text-overflow: ellipsis;Ví dụ : HTML Add code css này CSS
Show Bạn có thể xem demo tại đây : codepen.ioĐã đăng vào thg 8 8, 2019 7:02 SA 3 phút đọc Xin chào các bạn ! Tiếp tục với loạt bài thủ thuật hay xoay quanh CSS, hôm nay mình sẽ chia sẻ bài viết với chủ đề "Làm thế nào để xử lý được text-overflow". Đây là vấn đề được các bạn QA rất hay sử dụng để test giao diện. Ví dụ họ thường có một format kiểu 1001 chữ A dính liền nhau, nhập một đoạn văn bản cực dài cho tiêu đề hoặc bất cứ phần tử nào đó có thể hiển thị text. Và đương nhiên trong quá trình code Front-End (FE) nếu bạn không cover được các trường hợp thực tế có thể xảy ra đó chắc chắn QA sẽ log bug và tặng cho bạn 1 ticket nho nhỏ Dưới đây mình sẽ liệt kê ra một vài rule CSS có thể áp dụng để giải quyết vấn đề trên 1. Sử dụng bộ ba nguyên tử white-space, overflow, text-overflowBộ 3 này support hầu như tất cả trình duyệt nên ta có thể hoàn toàn yên tâm sử dụng ** Với Block-element Đơn giản với các phần tử block bạn chỉ cần thêm các rule sau
Trong đó với:
Và đương nhiên với block-element bạn chỉ có thể quan sát được sự thay đổi khi nội dung container chứa nó không đủ (ví dụ như co cửa sổ trình duyệt xuống tối đa hoặc set width cho phần tử) ** Với Inline-block-element Trong nhiều trường hợp bạn muốn cắt chuỗi nhưng chỉ muốn phần tử hiển thị ở dạng inline-block (ví dụ thẻ
2. Kết hợp -webkit-line-clamp với overflowVới
Đây là một thuộc tính mới rất hay nhưng rất tiếc chỉ support các trình duyệt nhân webkit, bạn có thể xem xét yêu cầu của người dùng để sử dụng cho hợp lý 3. Sử dụng word-breakNgoài 2 cách
ẩn nội dung tràn trên thì ta còn có thể sử dụng
Kết luậnTrên đây là một vài cách xử lý text-overflow với css thuần tuy rất nhỏ nhưng sẽ giúp bạn cover được rất nhiều khi bị QA test văn bản. Nếu bạn còn cách nào hay hơn đừng ngần ngại chia sẻ cho cộng đồng FE nhé. Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Xin cảm ơn và hẹn gặp lại ở các bài viết sau ! All rights reserved |