Cắt Chuỗi đoạn Văn Bản Với CSS - Viblo

Có thể bạn quan tâm

Bài đăng này đã không được cập nhật trong 8 năm

Để giới hạn số kí tự trong một đoạn văn bản, chúng ta thường xử lý bằng các ngôn ngữ lập trình phía Server hoặc dùng Javascript phía Client. Trong bài viết này mình giới thiệu tới các bạn một cách khác, đó là sử dụng thuộc tính text-overflow trong CSS.

Cú pháp dùng để cắt chuỗi trên 1 dòng:

p { width: 500px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

Giải thích code một chút:

white-space: nowrap: Ngăn k cho đoạn văn bản xuống dòng
overflow: hidden: Ẩn đoạn text bị thừa
text-overflow: ellipsis: Cắt một đoạn text và thay thế bằng dấu ... Kết quả

Cú pháp dùng để cắt chuỗi trên nhiều dòng:

p { width: 500px; overflow: hidden; text-overflow: ellipsis; line-height: 25px; -webkit-line-clamp: 3; height: 75px; display: -webkit-box; -webkit-box-orient: vertical; }

line-height: 25px: Set line-height cho đoạn văn bản
-webkit-line-clamp:3: Số dòng text hiển thị
height: 75px: Set chiều cao cho đoạn văn bản. height = line-height * line-clamp Kết quả

Mong rằng bài viết này có ích cho các bạn !

CSS Text-overflow

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

Cắt Chuỗi đoạn Văn Bản Với CSS - Viblo

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

Cách Giới Hạn Số Dòng Văn Bản Hiển Thị Trên Trình Duyệt Sử Dụng CSS

Giới Hạn Số Dòng Text Với CSS - Viblo

Ẩn Text Thừa Trên Nhiều Dòng Với Text-overflow Trong CSS

Giới Hạn Dòng Hiển Thị Bằng CSS Hỗ Trợ Cả IE - Code & Coffe

Giới Hạn Số Dòng Text Với CSS

Giới Hạn Số Ký Tự Trên Mỗi Dòng Với CSS - HelpEx

Giới Hạn Số Dòng Văn Bản được Hiển Thị Sử Dụng CSS

Giới Hạn độ Dài Của Tiêu đề Hoặc Mô Tả Bằng Css | Vietbug

Giới Hạn độ Dài Văn Bản ở N Dòng Bằng CSS? - HelpEx

Css Giới Hạn Text - Đặt Độ Dài Ký Tự Tối Đa Trong Css

Giới Hạn Số Dòng Css Không Hiển Thị Tốt Trên Safari - Dạy Nhau Học

Cắt Ngắn Chuỗi Chỉ Với CSS - Truncate Text With CSS - Homiedev

Cắt Chuỗi đoạn Văn Bản Với CSS | Học Lập Trình CSS

Liên Hệ