Bradley Taunt

The wonders of text ellipsis

Nov 15, 2016

A common issue when working with constrained UI elements is text overflowing outside of it’s parent or breaking into addition lines (thus breaking the layout).

This is most commonly seen with the direct and placeholder values for input fields on form elements. For example, the following input placeholder will be cutoff from the user’s view:

See the Pen Text Ellipsis (Input Placeholders) by Bradley Taunt (@bradleytaunt) on CodePen.

Luckily, 3 simple CSS parameters can fix this.

input::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

This allows the user to understand there is more content cut out from their current view. It’s not ideal to ever have content overflowing outside of the parent container, but if you need to the best workaround is to use text-overflow.


Other Articles

Stay hungry Feb 12, 2018

Open source typeface pairings Jan 25, 2018

ET-Jekyll theme Jan 14, 2018

Free device mockups Jan 10, 2018

Fresh coat of paint Jan 9, 2018

2017 - year in review Jan 1, 2018

Try getting into a routine Dec 20, 2017

Chasing performance Nov 20, 2017

The death of personality: the flat design system Nov 1, 2017

Unsolicited design review - Dropbox Oct 10, 2017

Goodbye CSS preprocessors Aug 7, 2017

Designers need thicker skin Jul 10, 2017

You should be using date & time inputs Jun 22, 2017

The wonders of text ellipsis Nov 15, 2016