Since the parent is still locked at width: 10rem it does not change dimensions, and the overflow simply spills out.
Css text overflow ellipsis full#
When it is, we change its display to inline-flex, which forces its layout to expand and wrap the full contents. The inner wrapper is now responsible for hiding the overflow… until it's hovered. the behaviour on the very first example). container to use the default of overflow: visible (i.e. If you look carefully you'll notice that we moved the overflow and text-overflow properties to the inner wrapper, instead of keeping them on. Let's add one more wrapper element (in this case a but it's not important) to create our own on-hover behaviour.
We could pull in a big tooltip Javascript library to bypass most of the concerns above. What else can we do? Redesign? Nah! Let's keep at this on-hover idea. Here's the same example, with mistreated title attributes try to read those on your phone. It is meant to provide "advisory information related to the element" The content will be truncated at different lengths in different browsers.Touchscreen and keyboard users will remain sad/angry and without a tooltip The "hover" behaviour doesn't work without an appropriate pointing device.Indeed, the browser will display a tooltip when hovering over such an element. One suggestion that usually comes up is "just place the full content in the title attribute it shows up on hover". We could re-evaluate and redesign instead, let's dig deeper. 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.
0 kommentar(er)
