Need your help to understand how to Truncate / Wrap Label when the appearance set as floating.
When the label too long it is not wrapped or truncated but actually placing over next element, which is very annoying.
See attached picture please.
If—and it's a very big if—there is a real need for the item label to be that length (the contrived simplistic example does you no favours there), then truncating it will make the situation worse by creating even more confusion for the user.
The label is obviously far too long. This indicates a need to redesign the UI. Some of the following actions may be appropriate. We don't know because no background information setting out the context of the problem has been provided.
- Keep the label and make the item bigger (unlikely to really resolve the issue).
- Make the label shorter.
- Use abbreviations.
- Move some of the semantic information contained in the label elsewhere: boilerplate text in region header/body; inline/pop-up help on the item; placeholder text.
- Split the representation of the data across multiple items.
Hi, I do appreciate the ideas, and I went through them already.
But there is a real case scenario when interface need to do something with the labels.
For example: You design the app for 1080p, but the user is using 720p, or user decided to make the browser smaller.
We can not prevent all of the possible scenarios, but we can try to implement normal label behavior: "If you don't fit, go next line, instead going over next item."
In my particular case, I have 120 element on the screen all very nice except one that need to have this label to avoid misinterpretation by the user.
I can change from floating to regular label, but it will look awkward , 119 nice Floating labels and one regular in the middle.
You can resize the browser anytime, and all your labels will go very wrong on the next element . Question is: WHY?