Tôi có một danh sách không có thứ tự chứa 3 mục danh sách (được trình bày trong ví dụ của tôi là 3 ô màu xanh). Mỗi ô có hình ảnh và 3 div (tiêu đề, vị trí, giá). Tôi chỉ quan tâm đến div tiêu đề của mỗi hộp.Cách tạo dòng trên cùng ngắn hơn dòng dưới cùng (trong div)
Nếu tiêu đề đủ dài để nó tạo ra 2 dòng, tôi muốn dòng trên cùng luôn ngắn hơn dòng dưới cùng. Trang demo của tôi đã xem here hiển thị các hộp 1 & 2 với thiết lập sai và hộp # 3 cho thấy thiết lập chính xác.
Tôi gặp sự cố ... điều này có thể yêu cầu js xác định độ dài dòng và sau đó đặt dòng dưới cùng dài hơn. Độ phân giải màn hình có thể sẽ đóng vai trò nhưng tôi không thể làm cho các dòng nhất quán trên các kích thước màn hình khác nhau?
Đây là một trong các mục danh sách, tôi quan tâm đến các div "titlebox":
<li class="list__item">
<figure class="list__item__inner">
<p class="vignette" style="background-image:url(http://www.ht-real-estate.com/template/ht2014/images/landscape/05.jpg)"></p>
<div class="titlebox">This line is longer than this line</div>
<div class="locationbox">Location</div>
<div class="pricebox">Price</div>
</li>
Bất kỳ sự giúp đỡ là rất tốt, nhờ !!
Ảnh chụp màn hình kèm theo quá: 
Chụp ảnh màn hình bao gồm trong câu hỏi của bạn. Liên kết một ví dụ từ một trang web bên ngoài được cau mày bởi vì nếu liên kết đi xuống câu hỏi thường trở nên vô ích. –
Làm cho tinh thần, tôi đã thêm một ảnh chụp màn hình. – Nova
khá chắc chắn bạn không thể kiểm soát nó với một div duy nhất bởi vì nó sẽ hoặc là phá vỡ trên một từ hoặc cố gắng để làm cho nó tuôn ra. – phillip