I'm working on an application in which there are occasionally single-word strings that need to be represented in a box that isn't wide enough to contain the word unbroken:

enter image description here

The example above is in German, but this happens with rare English words as well.

Does anyone have advice on how to deal with these kinds of texts? I could shrink the font or try to hyphenate the word, but neither of those approaches is bulletproof. We tried moving the little icon in the lower left but it looks awful anywhere but the lower left hand corner (for contextual reasons).

Any advice or thoughts others can offer would be hugely appreciated!

1 Answer 1


What you need is an ellipsis (…)

Ellipses are used to shorten words when the text gets too long. This can also be called truncation.

Even though most operating systems truncate texts in the middle as seen below:

enter image description here,

What may be applicable in your case is truncating at the end.

Here are 2 examples from Medium (left) and Google Hotels (right)

enter image description here

  • Thanks! These examples are super helpful reference points. I'll leave this open in case others have helpful thoughts, but this may be the simplest solution...
    – duhaime
    Feb 1, 2020 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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