Handling text overflow in wireframes
This is something that has bothered me a lot on how to approach.
I like to use "ugly data" in my wireframes since my goal isn't to have pretty wireframes, but functional ones. Using simple single-line words is easy and pretty, but it's not real.
Here are some ways I can think of to handle longer text in a preview before selecting an item: But then what if you have a nefarious user who exploits Unicode to overflow these fields?
The first example is the user using either
or
to create new lines, making a simple character count inaccurate.
The second example is the user using a long Unicode character ﷽
to abuse a character counting method.
The third example is using a whitespace rendering character ㅤ
to create an ellipsis out of seemingly nowhere.
You'd need to somehow not only measure the width of a piece of text, but also make sure it doesn't flow vertically. Or sanitize inputs so this doesn't happen in the first place. But these precautions aren't always technically feasible.
In addition, you need to display the full text somewhere anyways, and it starts getting ridiculous with the longer Unicode characters. As an example, longer title that ends in an ellipsis
is 37 characters, below is an example of a 20 character string, if you were to use newlines it would only take 17 characters to completely overflow the screen at that font size.
With all that in mind, how would you handle this? Do you scroll-overflow the text after a certain height? What if it's composed of newlines? Do you decrease font size?
I've been told that it doesn't matter because it would be ridiculous to have a user input such long text. I don't like this response since it does and will happen, and it should be my task to figure out the best way to display these edge-cases.