Grid bị lệch do khác độ dài nội dung

Chào các bác. Lại là tuyển tập hỏi ngu của e đây. Chả là nội dung của e chia thành grid gồm 2 cột và n hàng, nhưng khi truyền dữ liệu vào thì có hàng nó bị lệch như hình ví dụ


Lý do là trong phần title của mỗi grid có sự khác nhau, ví dụ hàng trên cùng 2 cái title đều 1 dòng, tới cái ô bị lệch thì title nó sẽ là 2 dòng
Cái này làm sao sửa các bác nhỉ, e cảm ơn các bác

 

Định dạng luôn cho tụi nó 3-4 dòng gì đó. Cái nào 1 dòng thì cho xuống dòng trắng mần vậy cho khỏe

 

Nếu bạn muốn title nằm trên 1 dòng và tự động ẩn từ dòng thứ 2 thì dùng css :

Code:

.selector
{
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

Nếu muốn fix cố định chiều cao thì làm theo cụ @Dang . Nếu muốn nó auto mà vẫn không bị lệch thì dùng masonry nhé

 

Cái nào cũng có ưu và nhược điểm của nó, tùy trường hợp mà sử dụng. masonry là lib riêng và nó thiên về gallery nhiều hơn (xếp ngói - chứ không phải grid). Như cách mình dùng thì title chỉ nằm trên 1 dòng cũng khá hạn chế. Nếu device có kích thước nhỏ thì phải điều chỉnh lại white-space, overflow để hiển thị tiêu đề đầy đủ - và mỗi dòng nên set 1 item.

 

Cách của bác @Dang đúng là chỉ dùng cho text trên 1 dòng. E có thử gg rồi và kết quả là nếu muốn áp dụng cho multiline thì phải fix cố định số dòng (ví dụ 3 dòng thì ngắt), cũng khá hạn chế các bác ạ

 

Không biết struct html của bạn như thế nào. Như demo của mình bên dưới thì mình set thuộc tính position: absolute và cố định ở bottom, nên nếu có N dòng thì nó vẫn cố định ở bottom và đẩy lên trên (như khối màu đỏ mình demo). Bác nào có cao kiến post lên để mọi người cùng tham khảo!
----

 

Thường nếu chỉ là tiêu đề thì cũng chả mấy khi quá 3 dòng đc kể cả trên mb. Đối với tiêu đề việc bạn fix cố định 3 hay 4 dòng cũng chẳng sao. Còn nếu description thì nếu quá 3 dòng thì bạn gắt và thêm ... cũng hợp lý. Các trang báo cũng đang làm cách này. Tùy nhu cầu mà áp dụng cho hợp lý thôi

 

@lqhoang1910 nếu bắt buộc chiều rộng x cao của các ô trong grid phải bằng nhau thì làm như @Dang chỉ ở trên và đương nhiên phải cắt chiều dài text cho phù hợp (hoặc để auto thì nó sẽ không show phần text dư ra).
Còn nếu không bắt buộc (trường hợp làm autoweb - mình thích sao mình làm vậy) thì em nên dùng css multi columns để responsive tốt hơn. Chỉ xác định số column là bao nhiêu, mỗi ô cùa grid (cell) sẽ tự scale chiều cao cho đủ để hiện thị ảnh + text, width của cell mình luôn cố định khoảng 95% của column là ổn.

Em xem thêm: https://css-tricks.com/guide-responsive-friendly-css-columns/ (cái link này nó cố định column width nhưng em nên sửa lại theo % để responsive)

 

Ngắt thì cũng phổ biến mà bạn, mà CSS nó cũng có ngắt rất tiện và đẹp trai không biết bạn biết chưa? Mình toàn ngắt bằng CSS, vừa đỡ mất công xử lý server side vừa ko bị mất text khi bot vào như server side:

div{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

 

Cảm ơn các bác. E cho column cố định chiều cao rồi giới hạn text lấy ra rồi ạ