Text truncation using text-overflow: ellipsis and line-clamp CSS properties
Do all screen readers read all of the text, not just the visible text?
text-overflow: ellipsis
Necessary properties:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
text-overflow: ellipsis with dir=rtl
Necessary style properties:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;Necessary attribute:
dir="rtl"
line-clamp: 2
Necessary properties:
overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
Screen reader results
- Firefox (84) & NVDA (2020.3): All text is read in all examples. No way to determine what is visible and not visible.
- Chrome (87) & JAWS (2020): All text is read in all examples. No way to determine what is visible and not visible.
- Edge (87) & Narrator (Win 10 Pro, v. 2004): All text of first text-overflow example is read completely but then the visible-only portion is read a second time. Similar with the dir=rtl version, except the screen reader's live text highlighting causes the text to
scroll
out of view when being read. The last visible line of the line-clamp version is read twice and then the non-visible remaining portion is read, but the word "under" the ellipsis is skipped.
- Chrome (87) & Talkback (9): All text is read in all examples. No way to determne what is visible and not visible.
- Safari (14) & VoiceOver Mac (10.14.5 Mojave): All text is read in all examples. No way to determine what is visible and not visible.
- Safari & VoiceOver iOS (14.3): All text is read in all examples. No way to determine what is visible and not visible.
scrollout of view when being read. The last visible line of the line-clamp version is read twice and then the non-visible remaining portion is read, but the word "under" the ellipsis is skipped.