


But for other scenarios, especially those where it's not possible to navigate to the full data view, this is Not Good Enough. For instance, a listing of emails can display the first few words of each message body and truncates the rest with ellipsis. This really doesn't solve much unless the whole content is not very interesting. I can't event select the whole text, copy, and paste it somewhere else to read it. So, we had a problem before, we have a different problem now! It looks visually better, but it conveys even less information. Let's look at a simple example a flex container with three items: Set this on a container with a specific width and overflow: hidden, and any text content will be trimmed with an elegant ellipsis character "…" In despair, the "what if we just trim it with dot-dot-dot" suggestion comes up.Įnter text-overflow: ellipsis. Especially with smaller screens and user-generated data, a single long name or label can introduce awkward wrapping or the tragicomedy of horizontal scrolling. Adding a piece of information to your interface should be an exercise in weighing costs and benefits.īut what to do when you must display more data? If the design does not accommodate it, you can break the whole layout. Uncritically adding more content is in general a bad approach: it increases the cognitive load of users, creates more intimidating interfaces for newcomers, makes performance worse, and many other negative effects. "Must show all fields" and "needs more columns" are typical requests that make UX designers and front-end developers die a little on the inside. One of the curses of building "enterprise applications" is the usual scenario of dealing with interfaces with too much data in them.
