Best practices to display data in a group that have too different length gaps

Question

I'm working on the Wireframes for a Client Detail screen. The client info section is devided into 3 small sections on top.

The problem is the length of 3 fields marked in my screenshot can't fit in the width of its sections. I can't reorder them vertically because it will take up space of Quotes & Loans sections below, which is also important.

Is there any clever way to deal with this issue? Thanks :)

Update: I'll send my client the version below and Mike M's version. Thanks Mike M & dennislees for your help.

Answer 1

First, I would consider the ellipses overflow as @dennislees has mentioned.

However, you can also try floating (stacked) labels, from material design.

This will allow maximum width of your sections for long strings (and long label names if need be). You'll have the full width of each section.

You can make the labels a little smaller than the values, similar to how material handles this (don't go too small). And it looks like your fields are static, until selecting 'Edit Client'. Then the editable fields can show the underline.

^{download bmml source – Wireframes created with Balsamiq Mockups}

What about vertical space increasing?

Yes, it would add some vertical space. However, with some decent visual design efforts you should be able to keep it to a minimum.

Assume that your users will have to do some scrolling anyway, especially if there's lots of quotes and loans in the list below. There's often some tradeoffs for scrolling with list views anyway.

Answer 2

Use CSS Ellipsis Overflow to Truncate Long Strings, and Make Better Use of Available Space

See the top answer to the question linked below for a suggestion for how to use CSS Ellipsis Overflow to deal with strings that are too long for their containers.

How best to display truncated links?

Also, in your mockup, in the top sections on the left and right, you have a lot of unnecessary white space to the right of the labels. Removing this will give you more space for long strings.