User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 ?

share|improve this question

closed as off topic by dnbrv, Charles Boyung, Ben Brocka Apr 20 '12 at 23:05

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

Where is the name being displayed? Does the name simply wrap, or push out its parent element when the name is too long? – Jung Lee Mar 18 '12 at 13:37
the name will be displayed in a content area of 80 pixels width, this content includes the place name over it's image. – Jamila Hyasat Mar 18 '12 at 14:10
If you use fixed-width font like courier/monospace along with px based unit for font size, then you can figure out how many characters will fit in 80 pixel wide area precisely. – Jung Lee Mar 18 '12 at 14:23
As written, this is NOT a UX question. I could definitely see it rewritten as a UX question, but then that might not be what the OP was actually looking for. – Charles Boyung Mar 19 '12 at 0:26
Yeah, "how to" sounds like you're asking for how to implement, not design, a lack of truncation. – Ben Brocka Mar 19 '12 at 13:33

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.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.