Giới Hạn Số Dòng Text Với Css, Multi-line - Anonystick

Trang chủ » Giới Hạn Dòng Css » Giới Hạn Số Dòng Text Với Css, Multi-line - Anonystick

Có thể bạn quan tâm

Blog học lập trình nodejs...
  • Snippets code
  • Learn code
  • Demo code
  • Rss code
  • Life code
  • Search code
Blog học lập trình nodejs...
  • Snippets code
  • Learn code
  • Demo code
  • Rss code
  • Life code
  • Search code

Giới hạn số dòng text với css, multi-line

#css #text-overflow-ellipsis

Nội dung bài viết

Video học lập trình mỗi ngày

Text-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.

Giới hạn số dòng text với css

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

Giới hạn số dòng text với css

Add code css này

CSS

.parent { width: 300px; } .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .block-ellipsis { display: block; display: -webkit-box; max-width: 100%; height: 43px; margin: 0 auto; font-size: 14px; line-height: 1; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

Show

dấu ba chấm css

Bạn có thể xem demo tại đây : codepen.io

Có thể bạn đã bị missing

DMCA.com Protection Status
  • About
  • FAQ
  • Privacy
  • Tipjs

© 2024 Anonystick | Made by Anonystick

Từ khóa » Giới Hạn Dòng Css