Trong khi thiết kế, chỉnh sửa giao diện, viết nội dung Blog, nếu bạn muốn khống chế khu vực mà đoạn văn bản có thể được hiển thị, đơn giản bạn chỉ cần
giới hạn số dòng mà đoạn văn bản có thể hiển thị bằng cách sử dụng CSS.
Xem code ví dụ:
.max-lines{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: N; /*số dòng muốn hiện */
font-size: F; /*cỡ chữ, đơn vị px */
line-height: X; /* khoảng cách giữa các dòng, đơn vị em*/
max-height: F*N*X; /* chiều cao tối đa đoạn văn bản = (cỡ chữ) x (số dòng) x (chiều cao) */
}
Cách sử dụng
Khi muốn sử dụng, bạn thêm class "max-lines" cho đoạn văn bản đó, có thể xem
DEMOÁp dụng
Bạn có thể áp dụng cách này để khống chế, giới hạn số dòng của tiêu đề bài viết trên trang chủ để không làm vỡ Layout, bạn chỉ cần chỉnh sửa CSS tương tự bên dưới là được:
h2.post-title, h2.post-title a {
font-size: 20px;
line-height: 1.3em;
color: #3b5998!important;
margin: 0 0 5px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
max-height: 52px;
}
Đây là vấn đề về mặt thẩm mỹ thường xuyên để canh chỉnh hàng chữ mà chúng ta cần sử dụng. Hy vọng sẽ giúp ích cho các bạn trong việc thiết kế.
Bài viết thuộc quyền quản lý bởi: Trucnt
Theme blogspot chia sẻ bởi :
Share123 Blogger Templates Design
Blog HồngTham gia cộng đồng Blogspot Việt Nam
Cộng đồng Blogspot Việt Nam