Inspiration for a search layout containing 3 arbitrary long values for web sites

Question

While thinking about a proper layout for a search page which contains always groups of three data entries I initially came up with such a concept:

The search groups, which can be searched for consist of a "value", e.g 123.45, a number, a short string, but can ultimately be any length and format (e.g "G2" or "lorem ipsum dolor"). This value accompanies a title with the length depicted above. It can be short or long, the image above has typical length of those titles. And finally an url.

After a quick thought I think this concept is exceptionally bad transporting the information. The "value" box cannot properly display arbitrary lengths, it is tricky to provide an ellipsis for the values and have the full value as a mouse-over-tooltip since this does not work for touch-devices in any way. Ellipsis for titles and urls do similarly fail. Finding a proper height for those boxes need to take content constraints into account which are simply not foreseeable.

Variable height of those search boxes create a very disturbing layout.

I've checked other sources which have similar data, e.g google search results or reddit's type of page display. It seems that linearising the data as it is rather wide than restricted seems promising but still does not handle the arbitrary width of the value very well.

Further flattening the results á la

Last Value may be long, Lorem ipsum dolor sit amet (...), http://the.page.domain.com/url/which/gets/long/sometimes

59.99, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales nibh a metus faucibus, eget convallis est feugiat. Praesent id vellit amet, http://the.page.site.com/url/oh/man/why is this long too

Harshly breaks the visual appeal (working with emphasis, colors) may mitigate the issue but I am still unsure whether the idea is correct.

(Btw. all 3 elements are equally important in the search, everything else in the single groups has been already dropped. The box layout is purely for grouping, space can perform equal or better in partitioning the page)

Answer 1

In these cases, I tend to 2 two things:

1) Use a list approach, something similar to Material lists (when not Material lists directly) 2) Limit content length

However, since it seems this might not be an option for you, I'd go with a Masonry grid, like teh image below:

This will allow you to play with both vertical and horizontal lengths without problems. However, keep in mind this could not be very good if content is small. Personally, I'd try the Material lists approach, but there you have an option