How to Avoid Truncation of any Text [closed]

Question

We are placing a name in a certain space in a webpage, how can we avoid the truncation of some of the name's letters in case the space given wasn't enough to display it all ?

Answer 1

In this case you have to limit the number of letters on account creation. This could be done in the following way:

It's possible to add an event handler in JavaScript to check the number of letters in a text box. If you use the OnKeyUp-event and calculate the length of the entered characters, you could inform the user that the input length is too long and will be truncated.

Another way is to disable the submit button if input text is too long, but remember to inform the user why.

But if you already have users their display name is present somwhere in the content database, in which there is a maximum length. You are suggested to use a design, where the longest display name fits, possibly on a row above other content to make it fit.

Real life example: We had fixed height of a table, and added content to it and where supposed to display a name and a phone number. Below that content there where two buttons for a user to push accepting or rejecting the suggestion. Later on there where much more information added to the name text box, such as a description where to meet. That made the buttons disappear since the height of the table was fixed. This could happen because we didn't match the max length of the database column with the displayed information and the fixed height. We moved away from fixed height, and the buttons could be pushed again.

Answer 2

Without wanting to sound glib, this is exactly the sort of constraint you should try to avoid as a web designer. Even if you're confident that you'll never be required to add more content, extra fields or iconography, requirements change all the time, and you need your designs to be flexible. Especially if your app could be translated, or your design applied to a slightly different service.

However, let's assume you can't redo your design. You've basically got two options:

1. Put constraints on the field's input, or
2. Bite the bullet and truncate

Number 1 isn't something I'd recommend, because:

• Constraints are bad. They make your life hell if a project's scope changes six months down the line (which it often does)
• It makes the contents of your fields less accurate
• It could force users to submit a different name to another they've recorded elsewhere, which causes data mismatching issues.

Number 2 isn't ideal, but can be ameliorated in certain ways:

• Depending on the language, there might be common ways you can abbreviate the name so you can shorten it without creating ambiguity. In the UK, for example, many place names have 'borough' and 'stone' in them - these can be subject to automated abbreviations ("Mexborough" -> "Mexboro."; "Leytonstone" -> "Leytonstn."). However, users might find these odd, and you're assuming your app will never go international.

• Truncate the name and provide tooltips / hover-over flyouts. This only works if a user doesn't have to differentiate between places or gather its exact name at a glance.

Really, though, I'd strongly recommend returning to your original design and trying to make it more flexible. If you've set pixel restrictions on text length, you're going to encounter serious issues when a visually impaired user needs to increase text size, or a branding change suddenly breaks all the place names you'd carefully squeezed into your divs. Save yourself the headaches.