The CSS text-overflow property can be used to show a visual indication for text that’s been clipped by its container.
I’m not a fan, and take every suitable opportunity to discourage people from using this property; though I rarely get enthusiastic support on that point. So I was very pleased to see someone else flying the same flag.
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
Vertical scrolling content at a width equivalent to 320 CSS pixels;
Horizontal scrolling content at a height equivalent to 256 CSS pixels.
Except for parts of the content which require two-dimensional layout for usage or meaning.
If text has been truncated with text-overflow, then this is a loss of content, and therefore an instant failure of 1.4.10.
Although the article concedes the possibility of valid use cases, I would personally go a step further and say there are none — that text-overflow should never be used.
How text overflow is used
The text-overflow property itself does not truncate text, it only specifies how the truncation should be indicated when it does occur. So it’s used in combination with other properties that restrict and clip the boundaries of a container, typically width or max-width combined with overflow: hidden.
And here’s an example of what that can look like when it takes effect:
The property value ellipsis is the most commonly used, and renders an ellipsis character (…) at the point of truncation, as you’d expect. This character (or whatever characters are specified) is included in the overall line-box limit, so the visual indicator itself further reduces the space available for the text, though only slightly.
The idea is that it can be used for containers with limited dimensions, so that single-line text within it doesn’t overlap the container in smaller viewports. It only works for single-line text, and can’t be used to truncate a multi-line paragraph.
However responsive layouts designed for small viewports also apply to larger viewports when viewed at high zoom (i.e. a 320px viewport at 100% zoom is functionally identical to a 1280px viewport at 400% zoom). So users who need large text to read effectively, such as people with low vision or a cognitive disability, may lose text content simply because of that need.
This is what makes it an accessibility issue, over and above the usability issue for small screen users.
Text truncated in this way might also fail Success Criterion 1.3.1 Info and Relationships. The truncation is purely a render effect — the full text is still in the DOM and accessibility tree — and no meta-data is exposed in the DOM to indicate where the break is. Arguably, this amounts to information or structure conveyed through presentation which cannot be programmatically determined. That would make it a 1.3.1 failure, but more importantly, it could be a problem for sighted screen reader users, when the spoken output no longer matches the visible text.
The potential for accessibility problems
Many CSS properties have the potential to cause accessibility problems, but that potential is rarely inherent to the property itself, it’s all about how you use it. Setting margin-left: -100vw on content that’s supposed to be visible will render it off-screen, which is an accessibility problem; but that doesn’t mean that margin itself is a problem.
Using overflow: hidden is a better comparison, because it has high potential for causing loss of text content. There are valid use-cases for it, but these are cases where either the loss of text content is intentional (i.e. for visually-hidden text), or where there’s no possibility of text content being lost (e.g. the element doesn’t have any text, or very little).
However text-overflow is inherently inaccessible, because its only purpose is to wave-through inaccessible design. In my view, this property should never have made it to the specification, it should have been rejected at the proposal stage.
Whenever overflow: hidden is used, it has to be carefully tested in various viewports and view sizes, to ensure there’s no possibility of text content being lost. But with text-overflow that testing is irrelevant, since the property only applies when text content has already been lost. If text-overflow kicks in, the design has already failed.
I think there are no valid use-cases for text-overflow unless the same text content is available elsewhere on the page; but if the content is available elsewhere, why is it duplicated here? If the intention is to create a short summary of longer content, then just write a short summary; it would read better anyway.
Wherefore art thou?
Ever-focused on solutions, I spent some time investigating whether content lost to text-overflow could be exposed in another way. But that doesn’t seem to be possible, at least not in any useful way.
Using a tooltip isn’t accessible, because title attributes are not available to keyboard or touch users. It is possible to make custom tooltips that support both keyboard and touch, but only for elements that are non-actionable, and are also in the Tab order. They have to be focusable to support keyboard users, but they also have to be non-actionable for touch users, since tapping the element would otherwise trigger its action. Having focusable elements which are not actionable is a source of potential confusion for keyboard and assistive technology users, because they seem like they should be actionable but just don’t work. And touch users are not likely to discover this functionality anyway; tooltips just aren’t a thing in touch interfaces.
Tooltips are not the answer.
Using aria-label is not the answer either, because it’s not visible, and therefore not available to most users who are not using assistive technology.
So then I wondered whether a scripted solution could create some kind of disclosure element, like, the ellipsis at the end being clickable and revealing the additional text. But how would it be revealed? We’ve already seen how a tooltip is not a viable solution, so it would have to be revealed by expanding the text inline.
That could work; it’s not exactly elegant or discoverable, but it could work.
But hang on … if there’s space to show the extra text inline, then why is it truncated in the first place? Using text truncation is not a positive design choice, it’s an emergency band-aid for designs that can’t properly handle overflowing content. Why would anyone want to make a feature out of that, it contradicts itself.
There’s no angle here. You can’t put lipstick on a pig.
(Sorry pigs, you’re awesome and beautiful, but this is the most recognizable expression I could think of to make this point!)
Alternatives to text truncation
The real answer here is not to rely on text truncation at all.
Designs should be flexible enough to accommodate any content they might have, in any viewport size (from 320px), and any increases in zoom (up to 400%).
This is not as challenging as it might sound.
Ten years ago, with floats or flexbox, it was much more difficult. But modern CSS techniques, such as responsive grids, make it relatively easy to build highly adaptive layouts that can accommodate significant changes in content size, while still maintaining a tidy layout. This concept is sometimes referred to as “asymmetrical design”, i.e. design which embraces the fact that data is not neat or symmetrical, rather than trying to force it to be (like Apple do, cough).
Even with a fully responsive and flexible layout, there may still be cases where text overflow could occur, for example, where a container is relatively small by default but may also contain very long words. There are other, much more elegant and accessible techniques for handling these situations, for example:
The CSS word-break property can be used to control hard line-breaking, e.g. that long words should be split without hyphenation wherever this is necessary to avoid container overflow.
The soft-hyphen character (poetically named ­ in HTML) can be used to specify hyphenation points in long words, and don’t visibly render unless hyphenation is necessary. This is often used in combination with the CSS hyphens property, which can alternatively be used to let the browser calculate hyphenation points automatically.
Soft hyphens is the better solution, I think, at least for English-language content, because it’s easier to comprehend. I would use word breaking for technical content such as code, where dashes may appear as content and could be confused with hyphens.
Hovertext: Written after enjoying Francis Su's new book, Mathematics for Human Flourishing, which slightly changed my view about this type of question.
Quick notes before blog:
One: A bunch of you mutants who use RSS noted that it was having weird formatting issues. I've deformatted today's blog before posting. Please let me know how it works.
Two: Thanks for the lovely emails, cucurbit-fanciers. I'm sorry so many of you have had trouble growing them - consider trying gourds or cucumbers or melons, which seem less subject to pests in my experience. One reader recommends looking into tatume squash.
Three: I've gotten some requests to host these posts somewhere so people can cleanly share them. I'm looking into it. My one rule is I don't want it to be the least bit interactive, other than through emails, so a lot of the ready-made blogging sites won't work. More to come.
Theory of the Peak Experience
I have a deep bias that VR does not have mass market potential. I think it wouldâ€™ve been shocking to me circa 1989 that for about the equivalent price of a Nintendo NES you could access a variety of fairly immersive virtual experiences, but it just wouldnâ€™t be that popular. However, I suspect if Iâ€™d had the option during Winter 1991 to either play Zelda 3 or a VR immersive version of the same game, I wouldâ€™ve played a lot more of the regular version. Iâ€™d have gone for the VR first, but then wouldâ€™ve played intermittently afterward.
I have a theory about why this is, and I suspect it can be generalized. Note, there are two aspects here: first, the expectation that more high fidelity gaming should be better, and second, the ultimately stronger preference for a more â€œtraditionalâ€ video game experience.
I think the first part - the expectation part - is easy to explain. Humans, especially nerdy ones, tend to want the world to operate on a High Score basis. Our brain tells us that if you take all the easily quantified parameters and amp them up you should get a better experience. Indeed, there are many venues where this is simply true - a plane that gets to its destination faster and has wider seats and tastier food is a better airplane experience. Other than the seats getting so wide they punch a hole in the plane, you can always drag those stats higher to make the trip better. I think at least some religions and ideologies work on the basis of taking complex things like â€œwhat is the good lifeâ€ or â€œhow do I behave ethicallyâ€ and converting it to something like a High Score framework, with defined rules and categories of behavior where doing more is always an improvement. How do I live a good life? Good news, thereâ€™s scripture and the scripture has a list.
The problem lies in assuming just about any experience obeys such a similar framework. And that leads to the second part - why is traditional sit-down gaming actually the more enjoyable option? I think the issue is that while you may have thought sitting on a couch with some snacks and a controller was just a point on the path to a Holodeck level experience, it was actually the peak experience of gameplay. Ideal gameplay does not involve maxing out all parameters. A VR headset is more expensive, more interesting to talk about as a technology, more likely to be featured in a beloved sci fi story, and more futuristic generally, but if the goal is something like pleasure, it is lesser. The ape called Human would generally rather have a comfy chair, a third person view, and only partial immersion, so that they can eat some chips or have a friend drop in. VR maxes out one video game parameter: fidelity. And, for most of us, most of the time, that just isnâ€™t desirable. The reason VR isnâ€™t very popular isnâ€™t a need to improve more - itâ€™s that the actual peak experience came at an unexpected place earlier in the history of game design. I think this also helps explain why so many extremely popular games have purposefully simple/unimpressive graphics - another thing that wouldâ€™ve shocked early 90s video gamers.
The only really strong use case I see for VR is porn, and I think understanding why helps get us deeper into the theory of peak experience. The basic deal, I suspect, is that porn is a subcategory of virtual experience where higher fidelity is genuinely desirable, pretty much always. Compare this to, say, the virtual experience of being a knight. I donâ€™t want the actual experience of a stifling, heavy, multi-layer suit of armor. I donâ€™t want the actual experience of sleeping in the woods unshowered for weeks at a time. I certainly donâ€™t want the actual experience of, say, being stabbed or beheaded.
I have not had the privilege, but my suspicion is people who do use VR porn, who I understand are a majority of all VR users period, are there to enjoy a brief high fidelity fantasy. They arenâ€™t looking to be emotionally moved, and to the extent theyâ€™re looking for escapism, they donâ€™t want to do it for hours or days at a time. So, porn is like the airplane described above - there are clear parameters and when their scores go higher the experience improves. You know what you want, and when you get more of it thatâ€™s better.
My guess is that the number of experiences that are porn or airplane-like is fairly narrow. Food is a good example of a clearly non-linear relationship. If you cook a lot, you know that there is always this strong temptation to take an amazing ingredient and max it out. Usually this doesnâ€™t work. Cardamom is delicious, but if you use a ton of it in a pie, it becomes bitter. Olives on pizza are great, but if you overload it you get wet greasy pizza goo. The peak experience doesnâ€™t involve blasting all parameters - it involved getting the right balance.
Now, hereâ€™s what really interests me. In the case of VR gaming vs. traditional gaming, my suspicion is VR will always be marginal. Itâ€™ll be kind of like paintball - there will be ultra-enthusiasts who are super into it, and people who go through phases of doing it a TON, but most of us will see it as a neat experience that we do every once in a while. This is a good thing - humans have recognized what the peak experience was (couch, beer, game) and decided to stick with it. This was not a top-down plan - itâ€™s just that thereâ€™s nothing pushing us to switch to a high-tech solution and so we happily have chosen not to.
There are cases where this is not true. Or, anyway, not true as far as I can tell. Consider longform letter writing, like people used to do on paper. To be nerdy about it, this form of writing scores high on a lot of parameters I value: writing is very expressive when you use a pen; itâ€™s very intimate; itâ€™s private and you wonâ€™t be judged; itâ€™s a long form, so you can be expansive; you have room to qualify your meaning so that you can say things that might be impossible to say in the shy world of face to face contact or the rapid-feedback world of social media. The physical and temporal separation from the receiver gives the thing a savor that even the equivalent sort of email canâ€™t match. The letter goes in the mailbox and you know you wonâ€™t hear for a long time. No hovering over the keyboard or looking at a screen. And because youâ€™re not looking someone in the eye or anticipating their instant response, itâ€™s strangely easier to be honest, even sentimental. Plus the fringe benefits: you leave behind correspondence thatâ€™s thoughtful and meaningful and made more personal by the use of actual handwriting. Something that maybe descendants of yours will one day read. You also improve as a writer, and as a thinker, because you have to formulate not just short statements, but full cohesive notions.
Weâ€™ve largely given this up. I have lately started writing long form emails to people, and sometimes even getting replies. With a few people, this has resulted in delightful and ongoing conversations that are unlike anything I could get browsing reddit or twitter or what have you. This was something I had to start doing as a conscious decision and itâ€™s been incredibly rewarding.
This leads to an excellent question: what the hell is wrong with me? Why is it that I know what the peak video game experience is, despite not playing many video games, yet I had to get cerebral to identify the peak experience of communication with friends. I think there are three things wrong with me, and likely with you too: first, the speed of email is just pragmatically useful for work. We all appreciate that person who responds to your email in 3 minutes, night and day. Not just because itâ€™s handy - it means projects get done faster, and the world works more efficiently. Conceded - on the parameter of efficiency, email, or email-like messaging systems, win.
Second, and related, email and social media offer the chance of instant feedback. Truth be told, most of us would choose rapid reactions positive or negative over the charming experience of just waiting. Note that this sets up email vs. letters as different from couch-sitting vs VR, because videogaming is a pure act of luxury. Thereâ€™s no reason to ever diverge from the peak experience because efficiency and feedback from friends are not the goal.
Third, Iâ€™m tied in with you people. If YOU donâ€™t write letters, I have no one to write to, nor to hear back from. Iâ€™m in this ecosystem and the habitat is gone.
A similar example, I suspect, is singing. People used to sing at home and play instruments for each other. In Darwinâ€™s papers, somewhere he does a cost-benefit analysis of whether to get married, and one of his notes in the plus column is music. To be married was to have music in the mid 19th century. Most exotically to me, men used to gather in pubs to sing together - not as a special thing or a singerâ€™s meetup or an affectation. There were whole books of ballads and such just so you could sing together. Thereâ€™s an old aviatorsâ€™ song that goes back to World War I, about a dying pilot, and which wouldâ€™ve been sung by airmen in bars. I found a version of it online (https://www.musicanet.org/robokopp/usa/pooravia.htm). Hereâ€™s my favorite portion:
"Take the magneto out of my stomach,
And the butterfly valve off my neck,
Extract from my liver the crankshaft,
There are lots of good parts in this wreck.
"Take the manifold out of my larynx,
And the cylinders out of my brain,
Take the piston rods out of my kidneys,
And assemble the engine again.
I love this verse. Itâ€™s obscure now, but for me it does everything. Itâ€™s a little silly, and you can imagine tipsy pilots singing it in a beer-hall. But it hits two serious notes - one about putting self before others and one about continuing to fight at all costs, both of which I find stirring. Again, this seems to me something like the peak experience of song. No in our imaginary pub sings as well as Celine Dion. Youâ€™re lucky if thereâ€™s music of any kind, and you can be sure it wonâ€™t be hooked to a speaker. But in doing the thing that music does - of unifying the group while moving the individuals - itâ€™s hard to imagine better. Somewhere in his essay collection, Once There Was a War, Steinbeck wrote about how in World War I, the song of the war became the almost-nonsensical Australian ballad Waltzing Matilda, but that World War II hadnâ€™t produced anything like that. When I first read that, I felt foreboding for Steinbeck - from his vantage in the 1940s, he didnâ€™t know heâ€™d already entered the era of mass media dominance. The songs of that war would be from people like George Formby or the Andrews Sisters or Marlene Dietrich. Top down, not bottom up, and I think in a way that was not bad, but which was lesser than the peak experience.
Again, itâ€™s clear why youâ€™d move on from the peak experience. Once you can have the Andrews Sisters, how much do you really wanna hear drunk Dave shouting in the pub about crankshafts? Even if you do, itâ€™s so easy to just play a record, rather than having to make your own music. Speaking for myself, as much as I love these old songs, I think itâ€™d feel like it was an affectation. And, again, the habitat for it is gone.
With both email and with singing, and I suspect with many things besides, something like perceived quality on one or two parameters moved people from the peak experience to a lesser experience. Itâ€™s something thatâ€™s been on my mind a lot lately - the other day I enjoyed an essay by Ryan North, where he lamented how in the early Internet you could go whole weeks having only positive experiences on the Internet. Anyone who was around back then likely remembers the feeling. I donâ€™t want to argue that the early 2000s were the peak experience on the Internet - I donâ€™t think they were, mostly because no really knew what they were doing yet. I also worry Iâ€™m at the extremely middle-aged risk of imagining my early 20s were the best time on Earth. But, I donâ€™t in fact feel this way - no in my early life wrote letters, and Iâ€™ve had to learn it myself. I came around to it due to the discovery that I love epistolary writing collections. TH White and PG Wodehouse are especial favorites, but letter-writing in general was once a great genre of book writing, now mostly gone. I have no nostalgia for it, because I wasnâ€™t around - but I do wish it were still with us.
In terms of my own reaction to genuinely sharing Ryanâ€™s feeling that the modern algorithmic and centralized Internet really is worse in many ways than it was in the past, I think itâ€™s more productive to look at individual parts of modern Internet life and see where, in particular, they have fallen short of the peak experience. Those are places where, at least in your own life, you can make repairs.
That is in part why Iâ€™m doing these blogs. Iâ€™ve found that for me, a genuine peak life experience is a good essay by an author I like. Unlike on social media, I find when I read an essayist whoâ€™s skilled, I donâ€™t obsess over whether theyâ€™re right or wrong. Rather, I enjoy the words and let them shape me. I enjoy inhabiting someone elseâ€™s brain for a little while before returning to mine. I donâ€™t suspect Iâ€™ve given you a peak experience here, but if you did read this, and it gave you a way of imagining the world that hadnâ€™t occurred to you, or simply had a few clever phrases, you probably had a more genuine, more enjoyable experience than most of the communication you do. If so, consider asking yourself why you donâ€™t do it more often.